Button

The primary interaction element. Seven variants, four sizes plus icon buttons.

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>
<Button variant="accent">Accent</Button>
<Button variant="danger">Danger</Button>

Sizes

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

Icon buttons

<Button size="icon" aria-label="Add">
  <PlusIcon />
</Button>
<Button size="icon-sm" variant="outline" aria-label="Add">
  <PlusIcon />
</Button>

States

<Button loading>Loading</Button>
<Button disabled>Disabled</Button>