Button
Triggers an action or event. Supports multiple variants and sizes, and can render as any element via the asChild prop.
Variants
Fourteen variants cover the full range of visual weight — from the most prominent filled button, through the semantic tones (caution, positive, destructive), the ghost family, and the input-style variants, down 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 standard HTMLButtonElement props, except className and style (styling is token-driven and closed).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "caution" | "positive" | "outline" | "dashed" | "secondary" | "ghost" | "mutedGhost" | "dangerGhost" | "fadedGhost" | "input" | "inputMuted" | "link" | "default" | The visual style of the button. |
size | "default" | "sm" | "lg" | "icon" | "iconSm" | "iconXs" | "iconInline" | "default" | The size of the button. The icon* sizes are square, for icon-only buttons. |
align | "center" | "start" | "center" | Horizontal alignment of the button's content. |
attachment | "none" | "start" | "end" | "none" | Flattens the start/end edge so the button can sit flush against an adjacent control. |
shape | "default" | "round" | "default" | Corner shape; "round" produces a fully pill-shaped button. |
textAlign | "center" | "left" | "center" | Text alignment within the button. |
fullWidth | boolean | false | Stretches the button to fill the width of its container. |
asChild | boolean | false | Delegates all props to the immediate child element via Radix Slot. |
disabled | boolean | false | Prevents interaction and applies reduced opacity. |