Badge

A span with utilities. Included so you can stop wondering whether the library has one.

plain CSS — works everywhere

PreviewCode

<span class="inline-flex items-center rounded-full bg-primary px-2.5 py-0.5 text-xs font-medium text-primary-foreground">Default</span>

<span class="inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground">Secondary</span>

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

<span class="inline-flex items-center rounded-full bg-destructive px-2.5 py-0.5 text-xs font-medium text-white">Destructive</span>

How it works

One <span>, four utility sets. Use <a> instead if it links somewhere — same classes work.
If the badge conveys status (“Failed”, “Live”), don’t rely on color alone — the text is the accessible part.