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 bg-primary-subtle text-primary-emphasis">Accent</span>
<span class="badge bg-success-subtle text-success-emphasis">Success</span>
<span class="badge bg-warning-subtle text-warning-emphasis">Warning</span>
<span class="badge bg-danger-subtle text-danger-emphasis">Danger</span>
<span class="badge bg-info-subtle text-info-emphasis">Info</span>With a dot
For status.
Active
Pending
Failed
Draft
Code
<span class="badge bg-success-subtle text-success-emphasis"><span class="dot"></span>Active</span>
<span class="badge bg-warning-subtle text-warning-emphasis"><span class="dot"></span>Pending</span>
<span class="badge bg-danger-subtle text-danger-emphasis"><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 text-bg-primary">New</span>
<span class="badge bg-transparent border text-body-secondary">Beta</span>
<span class="badge bg-primary-subtle text-primary-emphasis"><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 bg-primary-subtle text-primary-emphasis badge-sm">Accent</span>
<span class="badge bg-success-subtle text-success-emphasis badge-sm">Success</span>
<span class="badge bg-warning-subtle text-warning-emphasis badge-sm">Warning</span>
<span class="badge bg-danger-subtle text-danger-emphasis badge-sm">Danger</span>
<span class="badge bg-info-subtle text-info-emphasis badge-sm">Info</span>