Button

Atom

Core interactive element. Supports 5 visual styles (variants) and 5 sizes. disabled, loading and selected states are built-in.

Props EditorInteractive
<Button>Click me</Button>

Primary

Preview
Code
<Button variant="primary">Primary</Button>

Secondary

Preview
Code
<Button variant="secondary">Secondary</Button>

Ghost

Preview
Code
<Button variant="ghost">Ghost</Button>

Danger

Preview
Code
<Button variant="danger">Danger</Button>

Outline

Preview
Code
<Button variant="outline">Outline</Button>

Disabled

Preview
Code
<Button variant="primary" disabled>Disabled</Button>

Sizes

Preview
Code
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>

Icon left / right

Preview
Code
<Button iconLeft="⬇">Download</Button>
<Button variant="outline" iconRight="→">Next</Button>

Icon only

Preview
Code
<Button iconOnly aria-label="Delete item">✕</Button>

Full width

Preview
Code
<Button fullWidth>Full-width</Button>

Selected / active state

Preview
Code
<Button variant="outline" selected>Selected</Button>

Loading state

Preview
Code
<Button variant="primary" loading>Saving…</Button>
Sourcemodules/ui/Button.tsx