Button
Actions, ranked. A single black primary per screen, the signature green for the recommended action in context, quieter secondary and ghost variants for everything else, and a destructive variant reserved for irreversible actions.
Variants
<Button variant="primary">+ New</Button><Button variant="accent">Auto-fix</Button><Button variant="secondary">Review</Button><Button variant="ghost">Manually</Button><Button variant="destructive">Delete</Button>The destructive variant uses the AA-safe danger-action fill, not the status-danger bar colour. Reserve it for irreversible actions, normally behind a ConfirmDialog.
Sizes
<Button size="sm">Small</Button><Button size="md">Medium</Button><Button size="lg">Large</Button>Loading and disabled
<Button loading>Saving</Button><Button disabled>Blocked</Button>Icon only
<Button iconOnly aria-label="New"> <Plus className="size-4" /></Button>aria-label is required by the type signature when iconOnly is set — an icon button with no accessible name is a compile error, not a review comment.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | 'primary' | 'accent' | 'secondary' | 'ghost' | 'destructive' | 'secondary' | Visual weight and role. |
size | 'sm' | 'md' | 'lg' | 'md' | Control height and padding. |
shape | 'pill' | 'rounded' | 'pill' | Corner treatment. |
iconOnly | boolean | false | Square button; forces aria-label at the type level. |
loading | boolean | false | Shows a spinner, marks aria-busy, blocks activation. |