Actions

Button Group code

Copy the implementation or inspect every file that belongs to this component unit.

Preview Code

resources/views/components/ui/button-group.blade.php

@php
    /*
    | Joins a row of buttons into a single control. Put <x-ui.button> children
    | (outline or secondary work best) in the default slot; inner corners are
    | squared off and adjacent borders collapse.
    |
    | Usage:
    |   <x-ui.button-group>
    |       <x-ui.button variant="outline" icon="text-align-left" aria-label="Align left" />
    |       <x-ui.button variant="outline" icon="text-align-center" aria-label="Align center" />
    |       <x-ui.button variant="outline" icon="text-align-right" aria-label="Align right" />
    |   </x-ui.button-group>
    */
@endphp

<div
    role="group"
    {{ $attributes->merge(['class' => 'inline-flex -space-x-px [&>*]:relative [&>*:not(:first-child)]:!rounded-s-none [&>*:not(:last-child)]:!rounded-e-none [&>*:hover]:z-10 [&>*:focus-visible]:z-10']) }}
>
    {{ $slot }}
</div>