Badge

BadgeSecondaryDestructiveOutline

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

With icon

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

Verified

Bookmark

With spinner

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

Deleting

Generating

Link

Open Link

Custom colors

BlueGreenSkyPurpleRed

RTL

شارةثانويمدمرمخطط

متحقق

إشارة مرجعية

#Badge

#Usage

Include CSS

Add your badge HTML

#Examples

#Variants

#With icon

#With spinner

#Link

#Custom colors

#RTL