Skip to content
Components

Progress & loading

A spinner is for an action under a second with no known shape. Everything with a shape gets a skeleton that mirrors the real layout, so nothing jumps when the content lands.

Spinner & skeleton

The spinner inherits currentColor, so it is the right colour inside a primary button and inside a neutral panel without being told.
Skeleton — a parcel panel loading

Progress

Determinate only. If you do not know the proportion, this is the wrong component. The value is clamped, because a fetch that reports 103% should not paint past the track.

Avatar, kbd & code

Avatar

Initials only — GRIDD has no photography, so there is deliberately no image slot. Derived from the name, so they cannot disagree with the label beside them. Sizes 24 / 30 / 38; the solid fill is reserved for the organisation.

Groups overlap 8px with a 2px surface ring and cap at three plus a count — three faces and "+2" says "a few people" in a fifth of the space eleven avatars would take. The accessible name is the full list; the visual is the summary, the label is the truth.

Kbd & code

⌘ K search anywhereEsc close panelL14 RP80432lot_plan

The keycap has a 2px bottom edge — the one pixel of dimension in the system, because a key is the single thing here with a physical referent. GdCode has no background by default: a tinted box behind every identifier in a sentence turns prose into a chequerboard, and the typeface is already the signal.

Navigate

Esc