Button Group
Attaches related buttons into one control.
Usage
Wrap the buttons. The group collapses the seam between them, keeps the outer corners rounded, and lifts whichever button has focus so its ring is never clipped by a neighbour's border.
Naming the group
label is not decoration. The group renders role="group", and a role without a name is worse than no role: it
tells a screen reader there is a boundary here and then cannot say what for. Use labelledby instead when a visible heading already names it, so the name
is not duplicated.
Alignment
Vertical
Which one to reach for
Three components look alike here and behave differently. Picking the wrong one changes how the control is keyboard-operated, which is not something styling can fix afterwards.
- ButtonGroup — several independent actions that belong together visually. Every button keeps its own tab stop.
- Toolbar — the group is one tab stop and the arrow keys move between the buttons inside it.
- ToggleGroup — the buttons represent a selected value, not actions.
Props
Plus every native <div> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' |
label The group's accessible name, e.g. "Text alignment". Required, because `role="group"` without one is worse than no role at all: it tells a screen reader there is a boundary here and then cannot say what the boundary is for. Use `labelledby` instead when a visible heading already names it. | string | — |
labelledby Id of an existing visible label, as an alternative to `label`. | string | — |
class Extra classes merged onto the root element. | string | — |
children required | Snippet | — |