Components

Badges

Add compact labels for status, categories, counts, and metadata.

Components guideCopy-ready referencev0.7.0 current

Components

Badges

Badges are compact status and metadata labels. Use the base class alone for a neutral badge or add the primary modifier.

Draft New release Loved

HTML

<span class="bs-badge bs-badge-primary">New release</span>

Default and primary badges

Use the default badge for neutral metadata and the primary variant when a label needs brand emphasis.

Draft New release

HTML · Badge variants

<div class="bs-flex bs-flex-wrap bs-items-center bs-gap-3">
  <span class="bs-badge">Draft</span>
  <span class="bs-badge bs-badge-primary">New release</span>
</div>

Badges in context

Place badges beside a clear label or heading; the badge should supplement the surrounding text rather than replace it.

API deployment

3 changes

Ready for review by the infrastructure team.

HTML · Badge with card heading

<article class="bs-card">
  <div class="bs-card-body">
    <div class="bs-flex bs-flex-wrap bs-items-center bs-justify-between bs-gap-3">
      <h4 class="bs-card-title bs-mb-0">API deployment</h4>
      <span class="bs-badge bs-badge-primary">3 changes</span>
    </div>
    <p class="bs-card-text bs-mt-3 bs-mb-0">Ready for review by the infrastructure team.</p>
  </div>
</article>

Meaning

Use short nouns, counts, or states. A badge is supporting metadata, not a substitute for an actionable control.

Context

Make the surrounding sentence or heading understandable without depending on the badge color.

Semantics

A plain <span> is appropriate for static metadata. Use a button or link only when the label itself is interactive.