Button
Commonly used button component with various styles and sizes.
Installation
npx wdc add buttonExamples
Solid Colors
Standard solid color buttons.
Outline Variants
Various colors and outline variants
Gradient
Gradient buttons with various colors
Sizes
Available in small, default, and large sizes.
Icon Buttons
Use the icon input to create square buttons for icons. Works with all sizes.
Properties
Rounded, Icon Only, Disabled, Loading
API Reference
| Input | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'outline' | 'ghost' | 'link' | 'solid' | The visual style of the button. |
| color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'primary' | The color theme of the button. |
| size | 'default' | 'sm' | 'lg' | 'default' | Controls the height and padding of the button. |
| icon | boolean | false | If true, sets the button to a square shape for icon-only usage. |
| rounded | 'default' | 'full' | 'none' | 'default' | Controls the border radius. |
| gradient | boolean | false | Applies a gradient background (only works with solid variant). |
| loading | boolean | false | Shows a spinner and disables the button. |