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 |
|---|---|---|---|
variant | "default", "outline", "ghost", "danger" | "default" | Visual weight of the button. |
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.
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
<Link href="/docs">
<Button variant="ghost">Read the docs</Button>
</Link>Notes
The danger variant uses text-white rather than a token, because the danger
surface is dark in both light and dark themes.
Focus rings use focus-visible, so they appear for keyboard users but not on
mouse clicks.