Badge

Small status labels using <span class="badge">.

Default

Badge Secondary

<span class="badge">Badge</span>

<span class="badge secondary">Secondary</span>

Colors

One modifier class per Jazz color seed: primary, constructive, destructive, and color1 through color6.

Primary Constructive Destructive Color 1 Color 2 Color 3 Color 4 Color 5 Color 6

<span class="badge primary">Primary</span>
<span class="badge constructive">Constructive</span>
<span class="badge destructive">Destructive</span>
<span class="badge color1">Color 1</span>

Outline

<span class="badge outline">Outline</span>

With icon

Drop an <svg> inside — it sizes automatically.

Verified Failed Info

<span class="badge constructive">
  <svg><!-- icon --></svg>
  Verified
</span>

Loading

Add aria-busy="true" to inject a spinner. Works on any variant.

Syncing Uploading Processing

<span class="badge" aria-busy="true">Syncing</span>