Docs Components
Buttonexperimental
Buttons do things — they never navigate. Each surface gets one primary action, and it's an ink plate, never red. Red is saved for destructive actions, so when you see it, it always means “careful”. Secondary is the outlined workhorse, Ghost sits quietly in dense areas, and Danger warns before it deletes.
Variants
variant enumVisual emphasis of the action.
primary— Ink fill (color-bg-inverse) with inverse text. The heaviest plate on the page — one per surface.secondary— Transparent with the 1.5px ink rule border. The default variant.ghost— Text-only; for tertiary and toolbar actions in dense layouts.danger— Outlined in the danger trio. Stays outlined — destructive actions only get a filled treatment inside their confirm dialog.
loading flagBusy state: Spinner in the leading slot, aria-busy, interaction disabled.
States
default— Resting plate.hover— Primary lifts 15% toward the canvas via color-mix; outlined variants gain a 7% ink wash. Not applicable on touch.active— translate(1px,1px) — the plate presses into the paper. The signature interaction.disabled— 45% opacity, not-allowed cursor. Prefer hiding over disabling when the action can never apply.loading— Spinner replaces the leading slot; aria-busy=true; pointer events off; label may switch to the progressive form (Publishing…).
API
| Prop | Type | Description |
|---|---|---|
variant | string | Visual emphasis. |
size | string | md = 40px (space-8), sm = 32px (space-7). |
loading | boolean | Shows Spinner, sets aria-busy, disables interaction. |
Design specifications
- height
space-8 - height-sm
space-7 - padding-x
space-4 - gap
space-2 - radius
radius-sm - font
type-body - font-weight
weight-semibold - primary-background
color-bg-inverse - primary-text
color-text-inverse - secondary-border
color-border-rule / border-width-hairline - danger-text
color-status-danger-text - danger-border
color-status-danger-edge / border-width-hairline - focus-ring
color-focus-ring - transition
duration-fast / easing-standard - icon-button
btn-icon: square, space-8 (space-7 at sm)
Guidelines
- mustExactly one primary button per surface section.
- mustButton labels are verbs that state what happens: 'Create collection', never 'OK' or 'Yes'.
- mustIcon-only buttons require an aria-label.
- must-notNever use variant=primary for destructive actions; danger exists for that.
- must-notVermillion is never a button fill. The accent belongs to marks (danger outline, tab underline, meter fills), not to primary actions.