Seed

Button

Triggers an action or event — submitting a form, opening a dialog, or performing an in-page operation. Comes in three variants to establish visual hierarchy.

Variants

Use primary for the single most important action on a page. Reserve secondary for supporting actions and tertiary for low-emphasis or destructive-recovery actions.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

Sizes

Three sizes map to the button layout tokens. The default is md — reach for sm in data-dense tables or toolbars, and lg for prominent CTAs on marketing or onboarding surfaces.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Disabled state

The disabled attribute removes the button from the tab order and applies muted styling. Avoid disabling buttons without explaining why — prefer showing an error or tooltip instead.

<Button variant="primary" disabled>Primary</Button>
<Button variant="secondary" disabled>Secondary</Button>
<Button variant="tertiary" disabled>Tertiary</Button>

Intent modes

Buttons inherit colour from the nearest data-intent ancestor. Wrap a section of your UI to change the palette — no prop changes needed on the button itself.

brand
accent
info
success
warning
danger
<div data-intent="success">
  <Button variant="primary">Save</Button>
</div>

<div data-intent="danger">
  <Button variant="primary">Delete</Button>
</div>

Or pass the intent prop so the button sets data-intent on its root element — handy when you cannot wrap markup or need a different intent than the rest of the page.

<Button intent="success" variant="primary">Save</Button>
<Button intent="danger" variant="primary">Delete</Button>