<div><span class="badge">
neutral
</span>
<span class="badge badge-primary">
primary
</span>
<span class="badge badge-secondary">
secondary
</span>
<span class="badge badge-accent">
accent
</span>
<span class="badge badge-ghost">
ghost
</span>
<span class="badge badge-info">
info
</span>
<span class="badge badge-success">
success
</span>
<span class="badge badge-warning">
warning
</span>
<span class="badge badge-error">
error
</span>
</div>
<div>
@!jrmc.badge({ text: 'neutral' })
@!jrmc.badge({ text: 'primary', class: 'badge-primary' })
@!jrmc.badge({ text: 'secondary', class: 'badge-secondary' })
@!jrmc.badge({ text: 'accent', class: 'badge-accent' })
@!jrmc.badge({ text: 'ghost', class: 'badge-ghost' })
@!jrmc.badge({ text: 'info', class: 'badge-info' })
@!jrmc.badge({ text: 'success', class: 'badge-success' })
@!jrmc.badge({ text: 'warning', class: 'badge-warning' })
@!jrmc.badge({ text: 'error', class: 'badge-error' })
</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 |