Badges
Short labels for status and counts
Soft
The default.
Neutral
Accent
Success
Warning
Danger
Info
Code
<span class="badge">Neutral</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>With a dot
For status.
Active
Pending
Failed
Draft
Code
<span class="badge badge-success"><span class="dot"></span>Active</span>
<span class="badge badge-warning"><span class="dot"></span>Pending</span>
<span class="badge badge-danger"><span class="dot"></span>Failed</span>
<span class="badge"><span class="dot"></span>Draft</span>Solid and outline
For more or less weight.
New
Beta
Pro
Code
<span class="badge badge-solid">New</span>
<span class="badge badge-outline">Beta</span>
<span class="badge badge-accent"><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg>Pro</span>Small
For tight spaces.
Accent
Success
Warning
Danger
Info
Code
<span class="badge badge-accent badge-sm">Accent</span>
<span class="badge badge-success badge-sm">Success</span>
<span class="badge badge-warning badge-sm">Warning</span>
<span class="badge badge-danger badge-sm">Danger</span>
<span class="badge badge-info badge-sm">Info</span>