ButtonGroup
stableserver-safe
A segmented row sharing one border and one shadow, so the set reads as a single object rather than three stacked ones.
Exclusive choice
Set aria-pressed on the buttons when the group is a choice. For unrelated actions, leave it off.
<ButtonGroup label="Chart range">
<Button aria-pressed="true">Day</Button>
<Button aria-pressed="false">Week</Button>
<Button aria-pressed="false">Month</Button>
</ButtonGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Names the group for screen readers. |
Guidance
Don't
- Don't exceed about five options — past that it's a Select.
- Don't mix a choice and an action in the same group.
Accessibility
Renders role=group with the supplied label.
aria-pressed is yours to manage — the component doesn't assume the set is exclusive.