Laravel Button Group Component
Free · MITButtons that belong together, joined into one control and announced as one.
A Button Group built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::button-group>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::button-group label="Text alignment">
<x-aura::button variant="secondary">Left</x-aura::button>
<x-aura::button variant="secondary">Centre</x-aura::button>
<x-aura::button variant="secondary">Right</x-aura::button>
</x-aura::button-group>See the full API, props and live examples in the Button Group documentation.
Overview
<x-aura::button-group> joins a row of buttons into a single control: the inner corners square
off, the borders overlap so there is one line between two buttons rather than two, and the whole
row is announced as a named group.
That last part is what the CSS alone cannot do. Three buttons that touch are still three unrelated controls to a screen reader unless something says they belong together.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string|null |
null |
Names the group. Without it the row has no accessible name. |
orientation |
string |
'horizontal' |
horizontal or vertical. |
See more examples and every variant in the Button Group documentation.