Search for a command to run...
The primary interactive element. Composes Radix Slot via `asChild` so it can render as an anchor, a Link, or any other interactive element.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "outline" | "subtle" | "ghost" | "destructive" | "link" | "brand" | "blue" | "solid" | Visual style. brand uses tangerine; blue uses radix blue. |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Height and padding. Use the icon-* set for icon-only buttons. |
asChild | boolean | false | Renders as the immediate child (e.g. a Next.js Link) while keeping Button styles via Radix Slot. |
disabled | boolean | false | Standard HTML disabled. Removes pointer events and dims the button. |
destructive variant for actions that remove or destroy data.Use asChild to wrap a Next.js Link so the button keeps its styles but becomes an anchor.
aria-label on icon-only buttons so screen readers know what the action does.Drop icons in as bare <HeartIcon /> — the Button variant already sizes them to match the
label. See the icons guide for the underlying rule.
Establish hierarchy: one primary solid button per surface, the rest in lower-emphasis
variants.
Use vague labels like "Click here", "OK", or "Submit" — they say nothing about the action.
Override variant-owned dimensions with className — e.g. forcing size="icon" down to size-8.
Pick the size variant that fits; if none does, add one to the primitive.
Set a size-N className on an icon inside a Button — it fights the variant defaults and breaks
the rhythm between icon and label.
solid buttons on the same surface — it kills the visual hierarchy.Mix outline and subtle in the same row for the same kind of action; pick one and be
consistent.