Buttons allow the user to take actions or make choices.
Class name | Type | |
---|---|---|
btn | Component | Button |
btn-neutral |
Modifier
|
Button with `neutral` color |
btn-primary |
Modifier
|
Button with `primary` color |
btn-secondary |
Modifier
|
Button with `secondary` color |
btn-accent |
Modifier
|
Button with `accent` color |
btn-info |
Modifier
|
Button with `info` color |
btn-success |
Modifier
|
Button with `success` color |
btn-warning |
Modifier
|
Button with `warning` color |
btn-error |
Modifier
|
Button with `error` color |
btn-ghost |
Modifier
|
Button with ghost style |
btn-link |
Modifier
|
Button styled as a link |
btn-outline |
Modifier
|
Transparent Button with colored border |
btn-active |
Modifier
|
Force button to show active state |
btn-disabled |
Modifier
|
Force button to show disabled state |
glass |
Modifier
|
Button with a glass effect |
no-animation |
Modifier
|
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 |
This modal works with a hidden checkbox!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!