<div><span class="badge badge-outline">
neutral
</span>
<span class="badge badge-primary badge-outline">
primary
</span>
<span class="badge badge-secondary badge-outline">
secondary
</span>
<span class="badge badge-accent badge-outline">
accent
</span>
<span class="badge badge-ghost badge-outline">
ghost
</span>
<span class="badge badge-info badge-outline">
info
</span>
<span class="badge badge-success badge-outline">
success
</span>
<span class="badge badge-warning badge-outline">
warning
</span>
<span class="badge badge-error badge-outline">
error
</span>
</div>
<div>
@!jrmc.badge({ text: 'neutral', class: 'badge-outline' })
@!jrmc.badge({ text: 'primary', class: 'badge-primary badge-outline' })
@!jrmc.badge({ text: 'secondary', class: 'badge-secondary badge-outline' })
@!jrmc.badge({ text: 'accent', class: 'badge-accent badge-outline' })
@!jrmc.badge({ text: 'ghost', class: 'badge-ghost badge-outline' })
@!jrmc.badge({ text: 'info', class: 'badge-info badge-outline' })
@!jrmc.badge({ text: 'success', class: 'badge-success badge-outline' })
@!jrmc.badge({ text: 'warning', class: 'badge-warning badge-outline' })
@!jrmc.badge({ text: 'error', class: 'badge-error badge-outline' })
</div>
Doc : daisyui badge
Badges are used to inform user of the status of specific data.
| Class name | Type | |
|---|---|---|
| badge | Component | Container element |
| badge-outline | Modifier | transparent badge with [colorful] border |
| badge-lg | Responsive | badge with large size |
| badge-md | Responsive | badge with medium size (default) |
| badge-sm | Responsive | badge with small size |
| badge-xs | Responsive | badge with extra small size |
| badge-primary | Responsive | badge with primary color |
| badge-secondary | Responsive | badge with secondary color |
| badge-accent | Responsive | badge with accent color |
| badge-ghost | Responsive | badge with ghost color |
| badge-info | Responsive | badge with info color |
| badge-success | Responsive | badge with success color |
| badge-warning | Responsive | badge with warning color |
| badge-error | Responsive | badge with error color |