ButtonGroup

A container that visually joins a set of Buttons (or any elements) into a single connected unit. It only handles layout and styling — each button keeps its own click handler and state. For a stateful "pick one (or more)" control that looks like a button group, use ToggleGroup instead.

Examples

Joined buttons

<ButtonGroup aria-label="Document actions">
  <Button variant="secondary">Cut</Button>
  <Button variant="secondary">Copy</Button>
  <Button variant="secondary">Paste</Button>
</ButtonGroup>

Vertical

Set orientation="vertical" to stack the buttons. They stretch to a common width so the dividers line up.

<ButtonGroup orientation="vertical" aria-label="Zoom">
  <Button>Zoom in</Button>
  <Button>Reset</Button>
  <Button>Zoom out</Button>
</ButtonGroup>

Props

Prop	Type	Required	Default
ariaLabel	string	No	—
orientation	"horizontal" | "vertical"	No	"horizontal"