Skip to content

ButtonGroup

Related actions grouped together, either spaced or joined as one segmented control.

Spaced

<ButtonGroup label="Editor actions">
  <Button variant="secondary">Save</Button>
  <Button variant="secondary">Preview</Button>
  <Button variant="secondary">Publish</Button>
</ButtonGroup>

Segmented

<ButtonGroup label="View mode" segmented>
  <Button variant="secondary">List</Button>
  <Button variant="secondary">Grid</Button>
  <Button variant="secondary">Board</Button>
</ButtonGroup>

Props

PropTypeDefaultDescription
labelstring-Required; announced as the group name.
segmentedbooleanfalseJoined single-control look.

Accessibility