Button Group
A row of connected buttons that answer one question together — a view switcher, a pager, a set of filters — sharing one border so they read as a single control.
Preview
Size
When to use
- For two to six peers where one is chosen or each is equally likely: Day, Week, Month.
- For stepping controls: previous, a label, next.
Reach for something else
- For a primary and a secondary action: those are two Buttons with space between them.
Anatomy
- 1
Group
One outer border and radius around every cell.
- 2
Cell
A button without its own border; dividers between.
- 3
Selected cell
A filled surface, where the group is a choice.
States
Default
All cells at rest.
Hover
The cell under the pointer washes.
Selected
The chosen cell fills.
Disabled
One cell or the whole group.
Accessibility
- A group of choices is role="radiogroup" with arrow-key movement, or buttons with aria-pressed.
- The group carries an aria-label naming the question it answers.
Source
The Button Group is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block