Badges

Status pills, tags, status dots, and count badges. Combine .ziom-badge with a color (.ziom-badge-success) and optional style modifiers like .ziom-badge-solid, .ziom-badge-outline, or .ziom-badge-pill.

Colors

Default Primary Success Warning Danger Info

HTML

<span class="ziom-badge ziom-badge-default">Default</span>
<span class="ziom-badge ziom-badge-primary">Primary</span>
<span class="ziom-badge ziom-badge-success">Success</span>
<span class="ziom-badge ziom-badge-warning">Warning</span>
<span class="ziom-badge ziom-badge-danger">Danger</span>
<span class="ziom-badge ziom-badge-info">Info</span>

Solid, Outline & Pill

Solid Outline Pill

HTML

<span class="ziom-badge ziom-badge-solid ziom-badge-primary">Solid</span>
<span class="ziom-badge ziom-badge-outline ziom-badge-success">Outline</span>
<span class="ziom-badge ziom-badge-pill ziom-badge-info">Pill</span>

Status Indicators

Online Offline Live

HTML

<span class="ziom-status">
  <span class="ziom-status-dot ziom-status-dot-success"></span>
  Online
</span>
<span class="ziom-status">
  <span class="ziom-status-dot ziom-status-dot-danger"></span>
  Offline
</span>
<span class="ziom-status">
  <span class="ziom-status-dot ziom-status-dot-success ziom-status-dot-pulse"></span>
  Live
</span>

Count Badges

5 12 99+

HTML

<span class="ziom-count-badge">5</span>
<span class="ziom-count-badge ziom-count-badge-primary">12</span>
<span class="ziom-count-badge ziom-count-badge-sm">99+</span>