<div>
<button class="btn btn-lg">
large
</button>
<button class="btn">
Normal
</button>
<button class="btn btn-sm">
Small
</button>
<button class="btn btn-xs">
Tiny
</button>
</div>
<div>
@!jrmc.button({ text: 'large', class: 'btn-lg' })
@!jrmc.button({ text: 'Normal' })
@!jrmc.button({ text: 'Small', class: 'btn-sm' })
@!jrmc.button({ text: 'Tiny', class: 'btn-xs' })
</div>
Doc : daisyui button
Buttons allows user to take actions or make choices.
Class name | Type | |
---|---|---|
btn | Component | Button |
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 |
loading | Modifier | Shows loading spinner |
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 |
/!\ Deprecated
Button group daisyUI >= 3, use join