Button group
Related actions joined into one surface. A single highlight glides from segment to segment.
Basic usage
The highlight follows the pointer and the keyboard. It fades in where it lands, then springs from one segment to the next. A confirmation swaps the label in place. The chevron stays still and opens the rest.
<neura::button-group
label="Document actions"
:items="[
['id' => 'share', 'label' => 'Share', 'icon' => 'link', 'method' => 'share', 'confirm' => 'Copied', 'confirmIcon' => 'check', 'reserve' => ['Copied']],
['id' => 'duplicate', 'label' => 'Duplicate', 'icon' => 'copy', 'method' => 'duplicate'],
['id' => 'archive', 'label' => 'Archive', 'icon' => 'download', 'method' => 'archive'],
]"
:dropdown="[
'label' => 'More actions',
'items' => [
['label' => 'Pin', 'icon' => 'bookmark', 'method' => 'pin'],
['label' => 'Delete', 'icon' => 'trash', 'method' => 'remove', 'color' => 'danger'],
],
]"
/>Slots
Segments and menu actions can be written as slots. Icon-only segments keep their name for assistive technology. A numeric value rolls each digit. A word morphs in place: shared letters glide, new ones sharpen in, and letters that leave blur away.
<neura::button-group label="Zoom" orientation="vertical">
<neura::button-group.item id="out" label="Zoom out" icon="minus" icon-only method="zoomOut" :step="-25" />
<neura::button-group.item id="level" label="Zoom level" :content="$zoom.'%'" :min="25" :max="400" />
<neura::button-group.item id="in" label="Zoom in" icon="plus" icon-only method="zoomIn" :step="25" />
</neura::button-group>
<neura::button-group label="Layout" orientation="vertical">
<neura::button-group.item id="layout-prev" label="Previous layout" icon="minus" icon-only :step="-1" />
<neura::button-group.item id="layout" label="Layout" content="Fit" :values="['Fit', 'Fill', 'Crop']" />
<neura::button-group.item id="layout-next" label="Next layout" icon="plus" icon-only :step="1" />
</neura::button-group>Size, color, radius
Size, variant, color, radius and shadow follow the same packs as the button.
<neura::button-group size="xs" label="Edit" :items="$items" />
<neura::button-group size="md" variant="dark" color="primary" label="Publish" :items="$items" />
<neura::button-group size="lg" color="danger" variant="soft" rounded="full" label="Remove" :items="$items" />