Components

Badges

Add compact labels for status, categories, counts, and metadata with neutral and contextual variants.

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 a contextual modifier.

Neutral Primary Info Success Warning Danger Loved

HTML · Badge variants overview

<span class="bs-badge">Neutral</span>
<span class="bs-badge bs-badge-primary">Primary</span>
<span class="bs-badge bs-badge-info">Info</span>
<span class="bs-badge bs-badge-success">Success</span>
<span class="bs-badge bs-badge-warning">Warning</span>
<span class="bs-badge bs-badge-danger">Danger</span>
<span class="bs-badge bs-badge-primary">
  <i data-lucide="heart" class="bs-icon" aria-hidden="true"></i> Loved
</span>

All badge variants

Use the default badge for neutral metadata, primary for brand emphasis, and semantic modifiers for operational status.

Draft New release v0.7.0 Active Pending Failed

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>
  <span class="bs-badge bs-badge-info">v0.7.0</span>
  <span class="bs-badge bs-badge-success">Active</span>
  <span class="bs-badge bs-badge-warning">Pending</span>
  <span class="bs-badge bs-badge-danger">Failed</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

Operational

All edge nodes responded with zero error rate in the last hour.

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-success">Operational</span>
    </div>
    <p class="bs-card-text bs-mt-3 bs-mb-0">All edge nodes responded with zero error rate in the last hour.</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.

Badge API

Class	Purpose
`.bs-badge`	Base pill-shaped badge layout, padding, font weight, border, and neutral surface.
`.bs-badge-primary`	Brand-tinted background and primary text highlight.
`.bs-badge-info`	Informational notice or version badge.
`.bs-badge-success`	Positive state, completed step, or operational status.
`.bs-badge-warning`	Attention required, pending review, or cautionary notice.
`.bs-badge-danger`	Failed job, blocked status, or critical warning.