Components · ActionsNot verified with Figma

Button group

A button group is a row of joined System buttons for choosing between two to four short options. The selected button has a black 12% fill.

How to add a button group to a page. The file is components/css/button-group.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/button-group.css">`. Both templates already have it.
2. Markup	A `div.btn-group[role="group"]` with an accessible name, and one `button` per option.
3. Selected	Set `aria-pressed="true"` on one button and `"false"` on the others.
4. Select one	Your script moves `aria-pressed` on click. The CSS does not.
5. Focus ring	Add the small script that sets `body.keyboard-nav` on Tab, as for the Button.

Button group

API

Classes

Class	Use
`btn-group`	The group. The buttons inside are styled by the group, with no class of their own.

Things to know

Two to four short options. More options: use a select.
When the group is wider than its container, show a select with the same options and keep the two in sync. Never shrink, wrap or scroll the group.
Breakpoint: the buttons are 32px high below 769px and 40px from 769px; 640–768px is still mobile.
The [data-state] selectors do nothing outside the documentation pages.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/button-group.css)