components
Every component: when to use it, its parts and states, how it behaves, and how to write its words.
Each component has a page that follows the same order: what it is for, with a live example; when to use it, and when to use something else; its parts; its kinds and states; how it behaves; accessibility; how to write its words; do and don't; related pages; and, at the end, its exact specs. A link at the top of each page leads to itsReact implementation. The brand's marks, the chevron and the lockup, are onbrand, and the icons on iconography.
actions
Start something on this screen.
- buttonStarts an action on this screen; one emphasized button marks the next step.
- icon buttonAn action shown as an icon only, with a name for screen readers.
- action menuSeveral actions behind one button, such as one menu per table row.
- toolbar and selection toolbarActions above the content they act on; the selection toolbar acts on the selected rows.
inputs
Take a value, a choice or a filter.
- inputOne line of text.
- textareaSeveral lines of text.
- selectOne value picked from a short list.
- multi selectSeveral values of one filter, as checkboxes in a panel that opens.
- checkboxAn option that is saved with a form, with a mixed state for “some of these”.
- switchA setting that takes effect at once.
- fieldA label, a hint and an error, joined to one control.
- filter barSearch, filters, “clear all”, and the count of what is left.
data display
Show records, values and text.
- data tableA list people work through: they sort it, select rows, open groups and load more.
- table cellsA status with its reason, a date said both ways, an identifier.
- tableA simple table for a short list that people only read.
- badgeA label, a count, a tag: not a status.
- textText in one of the text styles.
- codeCode and commands, inside a sentence or as a block.
- kbdA key to press.
feedback & status
Say what is true, what happened, what is under way.
- statusThe state of one thing, with one of five meanings.
- bannerA message about the page or the list that stays for as long as it is true.
- toastA short confirmation of an action just taken.
- empty stateWhat a list shows when it is empty, done, has no matches, failed or can't be known.
- spinnerSomething is loading, where nothing better shows it.
layout & structure
Space, frames and titles.
- boxPadding and a canvas background.
- stackA row or a column with a gap from the space scale.
- dividerA thin line between two parts of a page.
- cardA framed panel with an optional header and footer.
- headingA page or a section title.
overlays
Content above the page.
- modalA decision that blocks the page until it is made.
- tooltipA short label for something that has no room for one.
navigation
Move between views and apps.