Button

Open in Figma

Primary, tertiary, secondary, destructive, and quiet actions with pending spinner.

Playground

children

variant

size

isDisabled

isPending

hitArea

<Button variant="primary">Add person</Button>

All variants

<Button variant="primary">Primary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="soft">Soft</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="quiet">Quiet</Button>
<Button variant="primary" isDisabled>Disabled</Button>
<Button variant="primary" isPending>Pending</Button>