<!--
/!\ Deprecated
Button group daisyUI >= 3, use join(https://daisyui.com/components/join/)
-->
<div class="btn-group">
<button class="btn btn-active">
button
</button>
<button class="btn">
button
</button>
<button class="btn">
button
</button>
</div>
<!--
/!\ Deprecated
Button group daisyUI >= 3, use join(https://daisyui.com/components/join/)
-->
@jrmc.button.group()
@!jrmc.button({ text: 'button', class: 'btn-active' })
@!jrmc.button({ text: 'button' })
@!jrmc.button({ text: 'button' })
@end
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