# Button Group

Groups related buttons together with consistent styling.

- Install: `php artisan blatui:add button-group`
- Source: https://blatui.remix-it.com/r/button-group.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

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

```blade
@props(['orientation' => 'horizontal'])

<div
    role="group"
    data-slot="button-group"
    data-orientation="{{ $orientation }}"
    {{ $attributes->twMerge("flex w-fit items-stretch [&>*]:focus-within:z-10 [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit has-[>[data-slot=button-group]]:gap-2 data-[orientation=vertical]:flex-col data-[orientation=horizontal]:[&>*:not(:first-child)]:rounded-l-none data-[orientation=horizontal]:[&>*:not(:first-child)]:border-l-0 data-[orientation=horizontal]:[&>*:not(:last-child)]:rounded-r-none data-[orientation=vertical]:[&>*:not(:first-child)]:rounded-t-none data-[orientation=vertical]:[&>*:not(:first-child)]:border-t-0 data-[orientation=vertical]:[&>*:not(:last-child)]:rounded-b-none") }}
>
    {{ $slot }}
</div>
```

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

```blade
<div
    data-slot="button-group-separator"
    role="separator"
    {{ $attributes->twMerge('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full w-px') }}
></div>
```

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

```blade
<div data-slot="button-group-text" {{ $attributes->twMerge("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4") }}>
    {{ $slot }}
</div>
```