Buttons & badges
The pressable primitive and the two ways the system labels state — a categorical badge and a live status chip.
Button
Six variants across three sizes. Presses give tactile feedback and every button carries a visible focus ring.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | 'default' | Visual weight and intent. |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | Height and padding. icon is square, for a single glyph. |
| asChild | boolean | false | Render the child element (e.g. an <a> or a router Link) with the button styles instead of a <button>. |
| …props | React.ComponentProps<'button'> | — | All native button attributes — onClick, type, disabled, and the rest. |
Badge
A small categorical label. Use it for a status word that does not change in place — a plan tier, a type, a count.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'default' | The badge tone. |
StatusChip
A live status indicator. Status is never encoded by color alone — the chip pairs a tone with a label, and an optional pulse for an active state or a strike for an inactive one.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone (required) | 'ok' | 'warn' | 'danger' | 'neutral' | — | The semantic status. |
| label (required) | string | — | The status word, read alongside the color. |
| pulse | boolean | false | Animate the dot to signal a live / active state (reduced-motion aware). |
| strike | boolean | false | Strike the label through for an inactive / retired state. |
CopyButton
Copies a value to the clipboard and flips its icon to a green check for a beat. A Button underneath, so it takes the same size and variant.
| Prop | Type | Default | Description |
|---|---|---|---|
| value (required) | string | — | The text written to the clipboard. |
| label | string | 'Copy' | Accessible label and optional visible text. |
| size / variant | ButtonProps['size' | 'variant'] | — | Inherited from Button. |
ThemeToggle
Cycles light → dark → system and persists the choice; the icon tracks the resolved theme. A single icon button for a header's actions slot.