Button
Triggers an action. Five variants across three sizes, each with hover, press and focus-visible states.
Examples
Variants
Show code
<Button variant="solid">solid</Button>
<Button variant="soft">soft</Button>
<Button variant="outline">outline</Button>
<Button variant="ghost">ghost</Button>
<Button variant="link">link</Button>Sizes
Show code
<Button size="sm">sm</Button>
<Button size="md">md</Button>
<Button size="lg">lg</Button>As a link
Show code
<Button href="/components/card" size="lg">Browse components</Button>States
Show code
<Button disabled>Disabled</Button>
<Button type="submit">Submit</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "soft" | "outline" | "ghost" | "link" | "solid" | Visual weight. solid is the primary action, soft is a tinted secondary, outline and ghost are quieter, link is text only. |
size | "sm" | "md" | "lg" | "md" | Height and horizontal padding: 2rem, 2.5rem, 3rem. |
href | string | — | Renders an <a> with the same styling instead of a <button>. |
Any other attribute — type, disabled, aria-*, onclick — is spread onto the rendered
element. Use href for navigation so the result is a real link.