Browse the docs
Button
Clickable action element with four variants and three sizes. Renders a real
<button>, so type, onClick, disabled, and every other button attribute
pass straight through.
Props
| Prop | Values | Default | Description |
|---|---|---|---|
as | element type or component | "button" | Render as something else — "a", or next/link's Link. |
variant | "default", "outline", "ghost", "danger", "none" | "default" | Visual weight. "none" emits no color classes — your className owns them. |
size | "sm", "md", "lg" | "md" | Height, padding, and text size. |
className | string | "" | Appended after the component's own classes. |
All other <button> attributes are forwarded, including ref. type
defaults to "button", so a Button inside a form never submits it by
accident — pass type="submit" on the one that should.
Common patterns
<Button onClick={() => save()}>Save changes</Button>
<Button variant="outline" size="sm">Cancel</Button>
<Button variant="danger" disabled>Delete</Button>
// A link that looks like a button — no nested interactive elements
<Button as={Link} href="/docs" variant="ghost">Read the docs</Button>
// Custom colors without ! overrides — variant="none" leaves color to you
<Button variant="none" className="bg-blue-600 text-white hover:bg-blue-500">
Brand action
</Button>Notes
The danger variant pairs bg-danger with text-danger-fg, the same way
accent pairs with accent-fg — keep the pair above 4.5:1 contrast when you
change the palette.
Focus rings use focus-visible, so they appear for keyboard users but not on
mouse clicks.