Button
Buttons trigger actions or navigation. They come in multiple variants and sizes to fit different contexts and importance levels.
Variants
Default
Primary actions
Destructive
Dangerous or irreversible actions
Outline
Secondary actions with border
Secondary
Less prominent actions
Ghost
Subtle, borderless buttons
Link
Styled as a link
Sizes
Size comparison
Available button sizes from xs to lg
With Icons
Leading icon
Icon before the text
Trailing icon
Icon after the text
Icon Buttons
Icon-only sizes
Square buttons for icons only
Ghost Icon Buttons
Minimal icon buttons for toolbars, headers, and secondary actions. Used for the GitHub link in the header.
Navigation icons
Header and toolbar actions
Action icons
Search, notifications, settings
States
Disabled
Button in disabled state
Loading
Button with loading spinner
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | The visual style of the button |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | The size of the button |
asChild | boolean | false | Render as child element (for links) |
disabled | boolean | false | Disable the button |