Components

Buttons

Indigo is the default primary action. Green is the single spark, used at most once per view for the most important action, and always with dark ink.

Buttons
<Button>Save changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn more</Button>
<Button variant="accent">Start free trial</Button>

<Button size="sm">Small</Button>
<Button loading>Saving</Button>
<Button disabled>Disabled</Button>

Props

PropTypeDescription
variant'primary' | 'secondary' | 'ghost' | 'accent'Primary is indigo, secondary is an outline, ghost is text-only, accent is the green spark.
size'sm' | 'md' | 'lg'Control height. Medium by default.
loadingbooleanSwaps the label for a three-dot pulse at a fixed width.
disabledbooleanInactive, non-interactive.

Guidelines

Do
  • Use the indigo primary for the main action on a view.
  • Use the accent green for at most one action per view, the most important one.
  • Keep the button width fixed while loading so nothing shifts.
Do not
  • Never put white text on the accent green. It fails contrast.
  • Never make a pill-shaped button. Buttons use a 10px radius.
  • Never show more than one green action on a single view.