A button triggers an action or takes the user to another page. It lets the user make a choice with a single tap. Use a mix of styles on one page to point at the main action and still offer the alternatives.
How to add a button to a page. The file is components/css/button.css.
Link the shared stylesheet once per page. Never copy the rules into a page, and never write a parallel version.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/button.css">. Both templates already have it. The icons need the Material Symbols Outlined font, as in the templates. |
| 2. Markup | A button.btn (or a.btn) with a variant and a size class, and the label in span.btn__label. |
| 3. Variant and size | btn--primary, btn--secondary, … and btn--lg, btn--md, btn--sm or btn--xs. The size switches at 769px by itself. |
| 4. Focus ring | Add the small script once per page: it sets body.keyboard-nav on Tab. |
| 5. Next to a field | Use the matching size: Input Large with Medium, Small with Small, XSmall with XSmall. |
Copy the markup you need. Hover and focus come from :hover and the keyboard focus rule; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
btn | The button. Needs a variant and a size. |
btn--primary | primary-inverted | secondary | secondary-inverted | blank | blank-inverted | destructive | accent | system | Variant. |
btn--lg | md | sm | xs | Size. |
btn--icon | Icon only: a square. Needs aria-label. |
btn__label, btn__icon, btn__badge, btn__dot | Parts of a button. |
icon-btn, icon-btn--sm, icon-btn--filled, icon-btn--close, icon-btn--close-inverted | The icon button. |
span.btn__label, also for buttons built in JS (innerHTML, and set the text on the span, never button.textContent).n > 99 ? '99+' : n.:focus-visible for buttons: use body.keyboard-nav..btn-primary and .btn-blank classes. New work uses the classes above.[data-state] selectors do nothing outside the documentation pages.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.