Badge

Non-interactive status indicators and category labels.

---

Classes

Class	Purpose
.badge	Base inline-flex pill container
.badge--neutral	Grey/surface variant
.badge--info	Blue/info tint
.badge--success	Green/success tint
.badge--warning	Yellow/warning tint
.badge--error	Red/error tint
.badge--sm	Small size
.badge--md	Medium size
.badge__dot	Colored dot indicator
.badge__icon	Icon element

---

Variants

Status badges

<div class="flex flex-wrap items-center gap-2">
  <span class="badge badge--neutral badge--md">Neutral</span>
  <span class="badge badge--info badge--md">Information</span>
  <span class="badge badge--success badge--md">Godkendt</span>
  <span class="badge badge--warning badge--md">Afventer</span>
  <span class="badge badge--error badge--md">Afvist</span>
</div>

Neutral Information Godkendt Afventer Afvist

With dot indicator

<div class="flex flex-wrap items-center gap-2">
  <span class="badge badge--success badge--md"><span class="badge__dot" aria-hidden="true"></span>Aktiv</span>
  <span class="badge badge--warning badge--md"><span class="badge__dot" aria-hidden="true"></span>Afventer</span>
  <span class="badge badge--error badge--md"><span class="badge__dot" aria-hidden="true"></span>Offline</span>
  <span class="badge badge--neutral badge--md"><span class="badge__dot" aria-hidden="true"></span>Kladde</span>
</div>

Aktiv Afventer Offline Kladde

Sizes

<div class="flex flex-wrap items-center gap-2">
  <span class="badge badge--info badge--sm">Small</span>
  <span class="badge badge--info badge--md">Medium</span>
  <span class="badge badge--success badge--sm"><span class="badge__dot" aria-hidden="true"></span>Small dot</span>
  <span class="badge badge--success badge--md"><span class="badge__dot" aria-hidden="true"></span>Medium dot</span>
</div>

Small Medium Small dot Medium dot

---

Usage

<span class="badge badge--success badge--md">
  <span class="badge__dot" aria-hidden="true"></span>
  Aktiv
</span>

<span class="badge badge--error badge--sm">Afvist</span>

<span class="badge badge--neutral badge--md">Kladde</span>

---

Accessibility

• Use <span> — badges are non-interactive
• Do not make badges into links or buttons
• Do not rely on color alone — always include descriptive text
• Dot is decorative and should use aria-hidden="true"

---

Best practices

Do:

• Use adjectives (descriptive words): "Active", "Pending", "Rejected"
• Keep text concise — ideally one or two words
• Use consistent colors for the same status across your application
• Pair with descriptive text, not just color

Don't:

• Use verbs (action words) — badges are not calls to action
• Make badges clickable — they should never be interactive
• Overuse badges — mark only what is truly meaningful
• Use uppercase text — it reduces readability