Button
Button is used to trigger an action or event.
Installation
npx jsx-daisyui add buttonDefault
button-default
Colors
button-colors
Variants
button-variants
Outline
button-outline
Soft
button-soft
Dash
button-dash
Sizes
button-sizes
Shapes
button-shapes
Loading
button-loading
Disabled
button-disabled
Wide and block
button-wide
Props
Button
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'default' | The semantic color of the button. |
variant | 'default' | 'ghost' | 'link' | 'outline' | 'dash' | 'soft' | 'default' | The visual style of the button. |
shape | 'default' | 'square' | 'circle' | 'default' | The shape of the button. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the button. |
wide | boolean | - | Increases the horizontal padding. |
loading | boolean | - | Shows a loading spinner. |
block | boolean | - | Makes the button take 100% width. |
active | boolean | - | Forces the active pressed state. |
disabled | boolean | - | Disables the button. |