Button
shadcn/ui
6 variants
Triggers an action. The primary building block for all interactions.
@/components/ui/buttonVariants
| Variant | Preview | When to use | Common labels |
|---|---|---|---|
| default | Primary action. One per section maximum. | Save, Submit, Confirm, Create | |
| outline | Secondary action — alongside a default button. | Cancel, Back, Discard | |
| ghost | Low-emphasis. Toolbars, table rows, icon buttons. | Table row actions, nav items, toolbar buttons | |
| secondary | Alternative secondary — more visible than ghost. | Export, Duplicate, Share | |
| destructive | Dangerous or irreversible. Always confirm first. | Delete, Remove, Archive permanently | |
| link | Navigation inside text. Not for actions. | Inline links, terms & conditions, 'learn more' |
Sizes
lg · 40px
default · 36px
sm · 32px
xs · 28px
Icon sizes
icon-lg · 40px
icon · 36px
icon-sm · 32px
icon-xs · 28px
States
| State | Preview | Note |
|---|---|---|
| Hover | default → bg-primary/90 outline → bg-accent ghost → bg-accent secondary → bg-secondary/80 destructive → bg-destructive/90 link → underline | |
| Focus | all variants → ring-ring/50 Tab to see focus ring | |
| Disabled | opacity-50, pointer-events-none | |
| Loading | disabled + animate-spin | |
| With icon | gap-2, svg size-4 auto |
In context
Tickets
28
Toolbar pattern — outline for filters, default for primary action
Delete ticket T7A3763?
This action cannot be undone.
T7A3763Banana Corp
Row actions — ghost icon buttons, only visible on hover
On this page