Reference
Components
36 primitives, grouped by what they do rather than by what they are made of. Every one is styled against the token layer, so none of them carries a colour of its own.
Actions
2Display
9Avatar
A person, as a circle, with initials until the image lands.
Badge
A count or a state, set in mono so it reads as metadata.
FigureBand
A row of counted facts, divided by hairlines and nothing else.
Kbd
A key on a keyboard, set as one.
LinkArrow
The mark on a link that leaves the page.
Separator
A rule, in the three weights a monochrome page needs.
StatusDot
The dot beside a status word.
StatusPill
A live state, named: a dot plus an uppercase mono label.
Tag
A subject label — a topic, a technology, a filter facet.
Feedback
7Alert
A message about the page, in place.
EmptyState
A collection with nothing in it — yet.
ErrorState
A page that could not be shown.
Progress
A bar that fills, or sweeps when the end is unknown.
Skeleton
The shape of the page, before the page.
Spinner
The one “working” indicator — a ring, never a shimmer.
Toast
A transient confirmation, mounted once near the app root.
Forms
7Checkbox
A choice that takes effect when the form is submitted.
Field
A labelled form row: label, control, and the one message below it.
Input
A single line of text entry.
RadioGroup
A set of mutually exclusive choices.
Select
A native <select>, restyled.
Switch
A setting that takes effect immediately.
Textarea
Multi-line text entry, resizable vertically only.