Atoms
The smallest public elements. Each has one role and its own states.
Icon
A line icon next to a familiar action. It never replaces the accessible name.
Example markup
Usage
Each symbol lives once in a hidden SVG sprite. An instance pulls it in with use and inherits the current color.
Accessibility
A decorative icon gets aria-hidden="true". An icon-only button must have an aria-label.
| Class | .icon |
|---|---|
| Geometry | 18 × 18 px, 1.7 px stroke |
| Color | currentColor |
Button
Starts an action. It shows whether the action is available or busy, and how important it is.
Example markup
Priority
Keep one primary button per group. Use a quiet button for a minor action next to the content.
Accessibility
Use a native button. Mark a busy button with aria-busy and an unavailable one with disabled.
| Variants | .button--primary, .button--quiet, .button--icon |
|---|---|
| Stable label | .button--stable, .button__label |
| States | disabled, aria-busy, aria-pressed |
Text input
A short text, number or search value.
Example markup
Choosing a type
Use the most specific native type. It sets the on-screen keyboard, validation and how screen readers announce the value.
States
disabled removes the field from the form. readonly keeps the value selectable.
| Height | 40 px |
|---|---|
| States | disabled, readonly, aria-invalid |
Text area
Text that you know will need several lines.
Example markup
Usage
Do not use a text area for one short value. rows sets the initial height.
Accessibility
A visible label is required. State any length limit before the field and in code.
| Minimum height | 96 px |
|---|---|
| Resize | vertical only |
Select
One known value from a set that does not need to stay visible.
Example markup
Usage
For two short modes, a segmented control works better. Keep a long set in a native select.
Keyboard
The native list keeps first-letter search and the system controls.
| Wrapper | .select-control |
|---|---|
| Icon | .select-control__icon |
Checkbox
An independent yes/no choice, or a choice of several values.
Example markup
Usage
The label describes the state after checking. Group several checkboxes under a visible legend.
States
Supports checked, indeterminate and disabled.
| Wrapper | .check |
|---|---|
| Group | .check-group |
Switch
Turns a mode on or off right away, with no separate save.
Example markup
Usage
Do not use a switch if the change needs a "Save" button. Use a checkbox there.
Accessibility
The native checkbox gets role="switch" and stays inside the visible label.
| Root | .switch |
|---|---|
| Role | role="switch" |
Slider
A number within a known range, when its relative position matters more than the exact value.
Example markup
Usage
Show the current number next to the label. For exact free entry, use a number field.
Keyboard
The native range supports the arrow keys, Home, End, Page Up and Page Down.
| Root | .range |
|---|---|
| Bounds | min, max, step |
Series key
Ties a series label to its color or line style next to a chart.
Example markup
Usage
Place the key next to the chart. If you can label a series right at its line, skip the separate legend.
Accessibility
Keep the label visible. Color is never the only way to tell series apart.
| Root | .series-key |
|---|---|
| Swatch | --swatch |
Status
A short state shown as a dot next to a word in a line of text.
Example markup
Usage
Use the dot and word in running text and in lists. For a status column in a table, use a bordered tag instead. Tags share one height and center their content.
Accessibility
Always pair color with text. Keep one kind of state per column.
| Variants | .status--ok, .status--warn, .status--error |
|---|---|
| Color | --status |
Tag
Names a category, attribute or state of a record inside a border of fixed height.
Example markup
Usage
Use short nouns. The signal variants make up a status column in a table, with the border and label in one color. .tag--accent has an accent fill and singles out one kind of tag, such as the main channel. An error uses the bordered .tag--error, so the two never get confused. In running text, show state with a status dot, not a border.
Group
.tag-list wraps tags and keeps an even gap between them.
| Root | .tag |
|---|---|
| Variants | .tag--accent, .tag--ok, .tag--warn, .tag--error |
| Color | --status for the border and label; .tag--accent uses the --accent-fill fill |
| Group | .tag-list |