Badge

Displays a badge or a component that looks like a badge.

Badge

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

Usage

Use one of the badge classes: badge, badge-primary, badge-secondary, badge-destructive or badge-outline.

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

Examples

Primary

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

Secondary

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

Destructive

<span class="badge-destructive">Destructive</span>

Outline

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

With icon

<span class="badge-destructive">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>
  With icon
</span>

Link

<a href="#" class="badge-outline">
  Link
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
</a>