Button Group
ButtonGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | required | Accessible name for the group. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Connected direction and arrow-key navigation axis. |
size | 'sm' | 'md' | 'lg' | 'md' | Default inherited by child buttons. An explicit child size wins. |
elevation | 'none' | 'low' | 'med' | 'high' | 'none' | Shadow depth for the connected surface. |
isDisabled | boolean | false | Disables every Button and IconButton in the group. |
Slot
ButtonGroup receives Button or IconButton through its required default slot.
Keyboard navigation
| Key | Behavior |
|---|---|
| Left and Right Arrow | Move focus within a horizontal group. |
| Up and Down Arrow | Move focus within a vertical group. |
Home | Focus the first available button. |
End | Focus the last available button. |
- Keyboard navigation skips disabled buttons.
- Right-to-left horizontal layouts reverse the Left and Right Arrow behavior.
Template ref
ButtonGroup exposes element. Its type is HTMLDivElement | null.
Native attributes
The root element receives:
- HTML attributes.
aria-*attributes.data-*attributes.class.style.- Native event listeners.