Components

Button Group

Groups related buttons together with consistent styling.

php artisan blatui:add button-group

<x-ui.button-group>
    <x-ui.button variant="outline">Previous</x-ui.button>
    <x-ui.button variant="outline">Next</x-ui.button>
</x-ui.button-group>

Nested

<x-ui.button-group>
    <x-ui.button-group>
        <x-ui.button variant="outline" size="icon" aria-label="Undo"><x-lucide-undo-2 aria-hidden="true" /></x-ui.button>
        <x-ui.button variant="outline" size="icon" aria-label="Redo"><x-lucide-redo-2 aria-hidden="true" /></x-ui.button>
    </x-ui.button-group>
    <x-ui.button-group>
        <x-ui.button variant="outline" size="icon" aria-label="Bold"><x-lucide-bold aria-hidden="true" /></x-ui.button>
        <x-ui.button variant="outline" size="icon" aria-label="Italic"><x-lucide-italic aria-hidden="true" /></x-ui.button>
        <x-ui.button variant="outline" size="icon" aria-label="Underline"><x-lucide-underline aria-hidden="true" /></x-ui.button>
    </x-ui.button-group>
</x-ui.button-group>

Solid

{{-- Connected solid buttons with subtle dividers — a segmented control. --}}
<x-ui.button-group class="*:not-last:border-r *:not-last:border-r-primary-foreground/25">
    <x-ui.button>Day</x-ui.button>
    <x-ui.button>Week</x-ui.button>
    <x-ui.button>Month</x-ui.button>
</x-ui.button-group>

Split

<x-ui.button-group>
    <x-ui.button variant="outline"><x-lucide-save aria-hidden="true" /> Save</x-ui.button>
    <x-ui.button variant="outline" size="icon" aria-label="More save options">
        <x-lucide-chevron-down aria-hidden="true" />
    </x-ui.button>
</x-ui.button-group>

Vertical

<x-ui.button-group orientation="vertical">
    <x-ui.button variant="outline"><x-lucide-archive aria-hidden="true" /> Archive</x-ui.button>
    <x-ui.button variant="outline"><x-lucide-flag aria-hidden="true" /> Report</x-ui.button>
    <x-ui.button variant="outline"><x-lucide-trash-2 aria-hidden="true" /> Delete</x-ui.button>
</x-ui.button-group>

With Icon

<x-ui.button-group>
    <x-ui.button variant="outline" size="icon" aria-label="Align left">
        <x-lucide-align-left />
    </x-ui.button>
    <x-ui.button variant="outline" size="icon" aria-label="Align center">
        <x-lucide-align-center />
    </x-ui.button>
    <x-ui.button variant="outline" size="icon" aria-label="Align right">
        <x-lucide-align-right />
    </x-ui.button>
</x-ui.button-group>

With Separator

<x-ui.button-group>
    <x-ui.button variant="secondary">Copy</x-ui.button>
    <x-ui.button-group-separator orientation="vertical" />
    <x-ui.button variant="secondary">Paste</x-ui.button>
</x-ui.button-group>

With Text

https://

<x-ui.button-group>
    <x-ui.button-group-text>https://</x-ui.button-group-text>
    <x-ui.input placeholder="example.com" class="rounded-l-none" />
</x-ui.button-group>

API Reference

Props, slots and exposed methods for <x-ui.button-group>.

Props

Prop	Type	Default	Description
`orientation`	`string`	`'horizontal'`	Lay the buttons out in a row or a column. Adjacent corners and borders are collapsed so the group reads as one connected control. `horizontal` `vertical`

Slots

Slot	Description
`default`	The buttons (or other controls like selects and nested button-groups) to join. Place sibling x-ui.button elements here; their touching edges are merged automatically.