Button
Primary action element. Supports multiple variants, sizes, and icon placement for flexible interaction patterns.
Variants
Sizes
With Icons
Icon Only
Rounded Shape
States
Button Order in Forms & Dialogs
Unsaved changes
You have unsaved changes. Would you like to save, export, or discard?
Usage
Use Primary (default) for the main action on a page or in a dialog.
Use Secondary (outline) for complementary actions alongside a primary button.
Use Tertiary (ghost) for low-emphasis actions like cancel, dismiss, or navigation.
Shape
Set shape="rounded" for fully rounded (pill-shaped) buttons, common in Material 3 and iOS-style interfaces. The default shape uses subtle corner rounding suited for business and enterprise UIs. All variants and sizes work with either shape.
Button order in forms & dialogs
Right-justify buttons at the bottom of a form or dialog. Reading from right to left:
- One primary button — the main call to action. Its label should describe the specific action (e.g. "Save Changes", "Send Invite"), not a generic "Submit".
- One to three secondary (outline) buttons — for supporting actions like "Export", "Discard", or "Save as Draft".
- One tertiary (ghost) button — the dismissive action, typically "Cancel", placed furthest from the primary button.
This ordering ensures the most important action has the strongest visual weight and the closest position to the user's focus, while the dismissive action is the lowest emphasis and hardest to accidentally hit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style of the button |
| size | "default" | "sm" | "lg" | "icon" | "default" | Size of the button |
| shape | "default" | "rounded" | "default" | Border radius — default (rounded-md) or rounded (rounded-full) |
| iconLeft | ReactNode | — | Icon rendered before children |
| iconRight | ReactNode | — | Icon rendered after children |
| asChild | boolean | false | Merge props onto child element via Radix Slot |
| disabled | boolean | false | Disables the button |