<div>
<button class="btn btn-active">
default
</button>
<button class="btn btn-active btn-primary">
primary
</button>
<button class="btn btn-active btn-secondary">
secondary
</button>
<button class="btn btn-active btn-accent">
accent
</button>
<button class="btn btn-active btn-ghost">
ghost
</button>
<button class="btn btn-active btn-link">
link
</button>
</div>
<div>
@!jrmc.button({ text: 'default', class: "btn-active" })
@!jrmc.button({ text: "primary", class: "btn-active btn-primary" })
@!jrmc.button({ text: "secondary", class: "btn-active btn-secondary" })
@!jrmc.button({ text: "accent", class: "btn-active btn-accent" })
@!jrmc.button({ text: "ghost", class: "btn-active btn-ghost" })
@!jrmc.button({ text: "link", class: "btn-active btn-link" })
</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