Button
Buttons trigger actions. Use them to submit forms, navigate, or initiate workflows.
Variants
Each variant has a specific function. Use them consistently so users learn what each means.
| Variant | Purpose |
|---|---|
| Primary | Principal call to action on the page. Only one per screen (header and modal excluded). |
| Secondary | Secondary action paired with a primary — e.g. "Cancel" or "Back". Never use in isolation. |
| Tertiary | Less prominent action. Works on its own or alongside a primary when several actions compete. |
| Destructive | Actions with destructive consequences — delete, remove, revoke. Reserve for irreversible intent. |
Design tokens
| Token | Value | Description |
|---|---|---|
background/action/primary | #318272 | Primary background |
background/action/primary/hover | #226558 | Primary hover |
background/action/primary/active | #15483e | Primary active |
text/inverse | #ffffff | Primary label |
background/surface | #ffffff | Secondary background |
border/default | #cccccc | Secondary border |
background/action/destructive | #bc1700 | Destructive background |
radius/sm | 4px | Button corner radius |