| Class name | Type | |
|---|---|---|
| btn | Component | Button |
| btn-primary | Utility | Button with `primary` color |
| btn-secondary | Utility | Button with `secondary` color |
| btn-accent | Utility | Button with `accent` color |
| btn-info | Utility | Button with `info` color |
| btn-success | Utility | Button with `success` color |
| btn-warning | Utility | Button with `warning` color |
| btn-error | Utility | Button with `error` color |
| btn-ghost | Utility | Button with ghost style |
| btn-link | Utility | Button styled as a link |
| btn-outline | Utility | Transparent Button with colored border |
| btn-active | Utility | Force button to show active state |
| btn-disabled | Utility | Force button to show disabled state |
| glass | Utility | Button with a glass effect |
| loading | Utility | Shows loading spinner |
| no-animation | Utility | Disables click animation |
| btn-lg | Responsive | Large button |
| btn-md | Responsive | Medium button (default) |
| btn-sm | Responsive | Small button |
| btn-xs | Responsive | Extra small button |
| btn-wide | Responsive | Wide button (more horizontal padding) |
| btn-block | Responsive | Full width button |
| btn-circle | Responsive | Circle button with a 1:1 ratio |
| btn-square | Responsive | Square button with a 1:1 ratio |
Examples
button with brand colors
Preview
HTML
active state button
Preview
HTML
outline button
Preview
HTML
disabled button
Preview
HTML
button with state colors
Preview
HTML
responsive buttons
Preview
HTML
glass
Preview
HTML
button size
Preview
HTML
button wide
Preview
HTML
icon button start
Preview
HTML
icon button end
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button block
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
disable animation
Preview
HTML