- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Button
Interactive button component with 7 variants (default, outline, secondary, ghost, destructive, link, pdf), 8 sizes (xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg), loading state with Spinner, and support for icons.
Figma: DS-001 Foundations · 37:931
Import
Live Demo
Interactive examples of button variants, sizes, and states.
Default size — all variants
With icons
With icons — all sizes
Loading state
Small size — all variants
Extra-small size — all variants
Large size — all variants
Icon-only — all sizes × selected variants
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "pdf" | "default" | The visual style variant of the button |
| size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | The size of the button |
| loading | boolean | false | When true, shows a spinner and disables the button |
| disabled | boolean | false | When true, prevents interaction with the button |
| asChild | boolean | false | Merge props onto child element using Radix Slot |
Examples
Basic Button
The simplest button usage.
Button Variants
Buttons come in 7 different visual styles.
Button Sizes
Available in 8 different sizes including icon-only variants.
Loading State
Show a spinner and disable interactions while loading.
With Icons
Use data-icon attribute to position icons inline.