Badge

<span>

Compact inline labels for status, categories, counts, and metadata.

Overview

Preview

DefaultSecondarySuccessWarningErrorOutline Live

Variants

Default (brand)

Preview

Default

<span class="inline-flex items-center rounded-full bg-[#D40C37]/10 px-2.5 py-0.5 text-xs font-medium text-[#D40C37] ring-1 ring-inset ring-[#D40C37]/20">
  Default
</span>

Secondary

Preview

Secondary

<span class="inline-flex items-center rounded-full bg-zinc-800 px-2.5 py-0.5 text-xs font-medium text-zinc-300 ring-1 ring-inset ring-zinc-700/60">
  Secondary
</span>

Success

Preview

Success

<span class="inline-flex items-center rounded-full bg-emerald-950/50 px-2.5 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-800/50">
  Success
</span>

Warning

Preview

Warning

<span class="inline-flex items-center rounded-full bg-amber-950/50 px-2.5 py-0.5 text-xs font-medium text-amber-400 ring-1 ring-inset ring-amber-800/50">
  Warning
</span>

Error

Preview

Error

<span class="inline-flex items-center rounded-full bg-red-950/50 px-2.5 py-0.5 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-800/50">
  Error
</span>

Outline

Preview

Outline

<span class="inline-flex items-center rounded-full border border-zinc-700 px-2.5 py-0.5 text-xs font-medium text-zinc-300">
  Outline
</span>

Live (with pulse dot)

Preview

Live

<span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-950/50 px-2.5 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-800/50">
  <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
  Live
</span>

Count pill

Preview

12

<span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[#D40C37] px-1.5 text-[10px] font-semibold text-white tabular-nums">
  12
</span>

Square / tag variant

Preview

v2.1.0

<span class="inline-flex items-center rounded bg-zinc-800 px-2 py-0.5 text-xs font-medium text-zinc-300 ring-1 ring-inset ring-zinc-700/60">
  v2.1.0
</span>

Accessibility notes

• Use <span> for decorative badges
• For badges conveying important state, add role="status" or aria-label
• Ensure meaning is conveyed through text, not color alone