Badge

Badge labels a status, category, or count with short text so users can scan quickly without mistaking it for a primary action.

BadgeSecondaryDestructiveOutline

InstallTerminal

npm install @a3s-lab/ui@0.4.0

<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="destructive">Destructive</span>
<span class="badge" data-variant="outline">Outline</span>
<span class="badge" data-variant="ghost">Ghost</span>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Badge component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/badge.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your badge HTML

Add class="badge" to an inline element. Add data-variant when the badge is not the default primary variant.

Inline SVG icons are spaced automatically by the badge gap.

<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="destructive">Destructive</span>
<span class="badge" data-variant="outline">Outline</span>
<span class="badge" data-variant="ghost">Ghost</span>

Badges support right-to-left layouts through native text flow. Flip directional icons explicitly.

Examples

Variants

Use data-variant to change the badge variant.

DefaultSecondaryDestructiveOutlineGhost

<div class="flex flex-wrap gap-2">
  <span class="badge">Default</span>
  <span class="badge" data-variant="secondary">Secondary</span>
  <span class="badge" data-variant="destructive">Destructive</span>
  <span class="badge" data-variant="outline">Outline</span>
  <span class="badge" data-variant="ghost">Ghost</span>
</div>

With icon

Use data-icon="inline-start" or data-icon="inline-end" on the icon for icon-aware spacing.

VerifiedBookmark

<div class="flex flex-wrap gap-2">
  <span class="badge"><svg data-icon="inline-start" class="lucide lucide-badge-check" 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="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>
    Verified
  </span>
  <span class="badge" data-variant="secondary">
    Bookmark
    <svg data-icon="inline-end" class="lucide lucide-bookmark" 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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
  </span>
</div>

With spinner

Use an inline loading icon with data-icon="inline-start" or data-icon="inline-end".

DeletingGenerating

<div class="flex flex-wrap gap-2">
  <span class="badge" data-variant="destructive"><svg aria-label="Loading" role="status" data-icon="inline-start" class="animate-spin lucide lucide-loader-circle" 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="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Deleting
  </span>
  <span class="badge" data-variant="secondary">
    Generating
    <svg aria-label="Loading" role="status" data-icon="inline-end" class="animate-spin lucide lucide-loader-circle" 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="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
  </span>
</div>

Link

Open Link

<a href="#" class="badge">
  Open Link
  <svg data-icon="inline-end" class="lucide lucide-arrow-up-right" 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="M7 7h10v10" /><path d="M7 17 17 7" /></svg>
</a>

Custom colors

BlueGreenSkyAmberRed

<div class="flex flex-wrap gap-2">
  <span class="badge bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</span>
  <span class="badge bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</span>
  <span class="badge bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</span>
  <span class="badge bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300">Amber</span>
  <span class="badge bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</span>
</div>

RTL

شارةثانويمدمرمخططمتحققإشارة مرجعية

<div dir="rtl" class="flex flex-wrap gap-2">
  <span class="badge">شارة</span>
  <span class="badge" data-variant="secondary">ثانوي</span>
  <span class="badge" data-variant="destructive">مدمر</span>
  <span class="badge" data-variant="outline">مخطط</span>
  <span class="badge"><svg data-icon="inline-start" class="lucide lucide-badge-check" 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="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>
    متحقق
  </span>
  <span class="badge" data-variant="secondary">
    إشارة مرجعية
    <svg data-icon="inline-end" class="lucide lucide-bookmark" 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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
  </span>
</div>

#Badge

#Usage

Include CSS

Add your badge HTML

#Examples

#Variants

#With icon

#With spinner

#Link

#Custom colors

#RTL