<div>
<button type="button" class="btn">
button
</button>
<button type="submit" class="btn">
button submit
</button>
<a role="button" class="btn">
link
</a>
<input type="button" class="btn" value="input" />
<input type="submit" class="btn" value="submit" />
<input type="reset" class="btn" value="reset" />
<label tabindex="0" class="btn">label</label>
</div>
<div>
@!jrmc.button({ text: 'button', type: 'button' })
@!jrmc.button({ text: 'button submit', type: 'submit' })
@!jrmc.button.link({ text: 'link' })
@!jrmc.button.input({ text: 'input' })
@!jrmc.button.input({ text: 'submit', type: 'submit' })
@!jrmc.button.input({ text: 'reset', type: 'reset' })
@!jrmc.button.label({ text: 'label' })
</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