Button
Triggers an action or event. Supports multiple variants and sizes, and can render as any element via the asChild prop.
Variants
Six variants cover the full range of visual weight — from the most prominent filled button to a subtle inline link.
Disabled
Add the disabled attribute to prevent interaction.
As Child
Use asChild to render the button as a different element (e.g. a Link) while keeping all button styles and behaviour:
Installation
Props
Extends all standard HTMLButtonElement props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | The visual style of the button. |
size | "default" | "sm" | "lg" | "icon" | "default" | The size of the button. |
asChild | boolean | false | Delegates all props to the immediate child element via Radix Slot. |
disabled | boolean | false | Prevents interaction and applies reduced opacity. |
className | string | — | Additional Tailwind classes merged via cn(). |