Button
Displays a button or a component that looks like a button.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/button.jsonVariants
Each variant shown in its default and disabled state.
| Variant | Description |
|---|---|
default | Primary action button |
secondary | Secondary action |
outline | Bordered button |
destructive | Dangerous actions |
destructive-secondary | Secondary danger |
ghost | No background |
link | Styled as a link |
black | Dark button |
on-color | For colored backgrounds |
transparent | Fully transparent |
Sizes
Text buttons in xs, sm, default, and lg sizes.
| Size | Height |
|---|---|
xs | 24px |
sm | 32px |
default | 36px |
lg | 40px |
icon-xs | 24×24px |
icon-sm | 32×32px |
icon | 36×36px |
icon-lg | 40×40px |
With Icons
Leading Icon
Icon placed before the label, across all sizes and variants.
Trailing Icon
Icon placed after the label — useful for dropdowns, navigation, expand/collapse.
Icon Only
Dedicated icon sizes: icon-xs (24px), icon-sm (32px), icon (36px), icon-lg (40px).
icon-xs
icon-sm
icon
icon-lg
Loading State
Use a spinning icon with animate-spin and disable the button.
Combined Icons
Both a leading and trailing icon in one button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "default" | Visual style variant |
size | string | "default" | Button size |
asChild | boolean | false | Merge props onto child element |
disabled | boolean | false | Disabled state |
className | string | — | Additional CSS classes |