How to build an accessible ButtonGroup in React

Exposes role="group" so assistive tech treats the buttons as one labeled set; optional roving focus lets arrow keys traverse the buttons as a single tab stop, matching toolbar expectations

When to use a ButtonGroup

• Presenting several related, independent actions that read as one control (e.g. an editor toolbar)
• Visually grouping buttons that share context without implying mutual exclusivity

When not to use it

• The buttons represent a single selected value among options — use ToggleGroup
• The actions are unrelated and should read as separate buttons — lay them out with spacing instead

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• ArrowRight
• ArrowLeft
• ArrowUp
• ArrowDown
• Home
• End

Common mistakes

Avoid: <ButtonGroup><Button>Bold</Button><Button>Italic</Button></ButtonGroup>

Prefer: <ButtonGroup aria-label="Formatting"><Button>Bold</Button><Button>Italic</Button></ButtonGroup>

A group with no accessible name is announced as an unlabeled region; supply aria-label or aria-labelledby

Example

<ButtonGroup aria-label="Text alignment"><Button>Left</Button><Button>Center</Button><Button>Right</Button></ButtonGroup>

See the full ButtonGroup reference →