Button Group

Related buttons share a boundary while keeping their native behavior.

Interactive preview

Live specimenTry the component

Each action keeps its own keyboard focus.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add button-group

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<ButtonGroup aria-label="Document actions">
  <Button variant="secondary">Save</Button>
  <Button variant="secondary">Save a copy</Button>
</ButtonGroup>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`orientation`	`horizontal \| vertical`	`horizontal`
`aria-label / aria-labelledby`	`Accessible group name`	`required for meaningful groups`

Accessibility

Use an accessible group name. Each button retains its normal Tab stop, focus, disabled state, and click behavior. This is a group of actions, not a toolbar or radio group; it does not invent arrow-key navigation or selection.