Primitive
Button
One button, five jobs. Accent only for the thing that needs you.
States
Primary
Secondary
Ghost
Accent
only for needs-you moments
Danger
With icon
Small
Working
Disabled
As link
When to use
- Actions. Primary for the one main action on a surface, secondary for the rest, ghost for quiet ones.
When not to
- Navigation that reads as a link. Use a link.
- Turning a setting on or off. Use Toggle.
Props
| Name | Type | Notes |
|---|---|---|
| variant | primary | secondary | ghost | accent | danger | accent is reserved for approving an ask; danger for turning protection off. |
| size / icon / iconEnd / href / working / full | href makes it a link that looks like a button. |
* required
Accessibility invariants
- Real buttons or real links; never a div.
- working sets aria-busy and blocks clicks.
- Focus ring comes from the global focus style.
Agent instructions
For anything generating UI from this system
Default to secondary. Use exactly one primary per surface. Use accent only inside ApprovalCard or an equivalent needs-you moment. Never use accent for save, submit or continue.