Actions

Interactive affordances — buttons, badges, and status dots. One primary accent per viewport.

Primitives · fixture-only

Primary CTA on a form

Use variant="primary" once per form or modal for the main submit action.

Workshop: Object create dialogs, approval decisions, composer send.
Avoid: Multiple primary buttons in the same viewport — dilutes hierarchy.

Fixture data only — behaviour matches production chrome

Row status without pills

StatusDot communicates state in tables and lists without heavy filled badges.

Workshop: Object table rows, workflow run status, agent health.

Fixture data only — behaviour matches production chrome

Button

6 variants × 3 sizes × disabled / loading

Quick preview

Light

Dark

primary

outline

secondary

ghost

subtle

danger

Badge

Semantic tones for counts, labels, and filters

Tones

neutralbluesuccesswarndangertealindigo

StatusDot

Preferred for row/cell status — dot + label, not a filled pill

Tones

neutralsuccessdangerwarnbrandindigo