ButtonGroup from @prepared911/ui-core is a layout primitive around a cluster of Buttons that share visual context. The component handles grouping semantics; each button inside the group carries its own accessible name.
What the component handles
- Group role. Renders
role="group" on the container.
- Layout rhythm. Spacing and alignment between buttons is consistent.
- Group label. When the cluster represents one conceptual control (e.g., "Record actions"), set
aria-label on the ButtonGroup so screen-reader users get context before hearing the individual buttons.
- Accessible names on each button. Every button still needs a readable name. Position relative to siblings is not a label.
- Ordering. Tab order follows DOM order; keep the primary action first or last consistently across the app.
- Tab / Shift+Tab move between buttons.
- Enter / Space activate the focused button per the underlying
Button contract.
- Container →
role="group" with optional aria-label or aria-labelledby.
- Each child renders its own button (or link) semantics.
- Spatial implication. Adjacent buttons can look like one control to sighted users but read separately to assistive tech. If the group truly acts as one control with sub-actions (e.g., "Save and send"), reach for
SplitButton instead.
