Button Group
Coordinates a set of ZyraButton children — shared size/variant/color/radius, layout, and optional single/multiple selection — without duplicating Button behavior.
API
All inputs and configuration options for zyra-button-group.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
join | 'attached' | 'separated' | 'separated' | Segmented (joined) vs spaced layout |
gap | 'none' | 'sm' | 'md' | 'lg' | 'md' | Spacing between buttons when separated |
fullWidth | boolean | false | Stretches buttons to evenly fill the container |
wrap | boolean | false | Allows buttons to wrap onto multiple lines |
size, variant, color, radius | ButtonSize | ButtonVariant | ButtonColor | ButtonRadius | undefined | Shared config pushed to children; a child’s own input always wins |
disabled | boolean | false | Disables every button in the group |
selectionMode | 'none' | 'single' | 'multiple' | 'none' | Whether the group tracks a selected value |
allowEmptySelection | boolean | false | Single-select only: clicking the selected button again clears it |
value | string | number | (string | number)[] | null | null | Two-way bindable selection; also works with ngModel/reactive forms |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- role="radiogroup" + role="radio"/aria-checked in single-select mode
- role="group" + aria-pressed on each button in multiple-select mode
- Arrow keys move focus (and select, in single mode); Home/End jump to first/last enabled button
- Roving tabindex keeps exactly one button in the Tab order at a time
- Disabled buttons are skipped during keyboard navigation