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>

Button group

Glass track (same fill/rim/blur language as secondary Button). Segments hover with a light wash — no stacked glass pills.

<ButtonGroup size="sm">
  <Button size="icon-sm" aria-label="Zoom out">−</Button>
  <Button size="sm">Fit</Button>
  <Button size="icon-sm" aria-label="Zoom in">+</Button>
</ButtonGroup>