Button
Buttons initiate actions. Use the default variant for primary actions, secondary for supporting actions, and ghost for inline or navigation actions. Every variant respects the 44px minimum touch target and provides clear visual feedback on interaction.
Variants
Sizes
States
Usage Guidelines
Use Default for primary page actions like 'Save' or 'Submit'. One primary button per section.
Don't use multiple Default buttons in the same context. It creates visual competition and confuses priority.
Use Ghost for toolbar icons and inline actions where the button shouldn't draw attention.
Don't use Ghost for primary actions. Users may miss it entirely.
Use Destructive only for irreversible actions like deletion. Pair with a confirmation dialog.
Don't use Destructive for cancellation or dismissal. Those are safe actions.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style variant |
| size | "default" | "sm" | "lg" | "icon" | "default" | Button size |
| asChild | boolean | false | Render as child element using Radix Slot |