Badge

Notification badge and tag component with sizes, shapes, variants, and dynamic colors. Collapses to an 8px dot when empty.

Notes

<span class="badge"></span> (empty) renders as an 8px notification dot.
Prefer combined utilities like badge-outline-primary over separate badge-outline badge-primary — smaller CSS output.
Size defaults to badge-md (20px height) when no size class is set.

Default

Text badge (error/red default)

New 99+ Hot Recommend

Empty dot

Real-world usage

On buttons

On icons

🔔 💬 📧 3

Inline text

Order status Shipped Version v2.0

Sizes

badge-2xs (14px)

2xs 2xs

badge-xs (16px)

xs xs

badge-sm (18px)

sm sm

badge-md (20px, default)

md md

badge-lg (22px)

lg lg

badge-xl (24px)

xl xl

badge-2xl (28px)

2xl 2xl

Theme colors

Primary

Solid Outline Subtle Muted Solid

Secondary

Solid Outline Subtle Muted Solid

Tertiary

Solid Outline Subtle Muted Solid

Success

Solid Outline Subtle Muted Solid

Error (default)

Solid Outline Subtle Muted Solid

Info

Solid Outline Subtle Muted Solid

Warning

Solid Outline Subtle Muted Solid

Caution

Solid Outline Subtle Muted Solid

Highlight

Solid Outline Subtle Muted Solid

Ink

Solid Outline Subtle Muted Solid

Title

Solid Outline Subtle Muted Solid

Description

Solid Outline Subtle Muted Solid

Caption

Solid Outline Subtle Muted Solid

Placeholder

Solid Outline Subtle Muted Solid

Black

Solid Outline Subtle Muted Solid

White

Solid Outline Subtle Muted Solid

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Tailwind palette (green-100/500/800)

green-100 green-500 green-800

Variants with custom color

outline subtle muted solid

Arbitrary values

[#ff0000] [rgb(25,120,200)] outline subtle muted solid

Shapes

badge-pill (pill, default)

Pill Success Error

badge-rounded (small radius)

Rounded Success Error

badge-square (no radius)

Square Success Error

badge-scoop-start (clip bottom-left)

Scoop L Success Error

badge-scoop-end (clip bottom-right)

Scoop R Success Error

Variants

Solid (default)

Primary Success Error Highlight Info

Outline (border only)

Primary Success Error Highlight Info

Subtle (borderless tint)

Primary Success Error Highlight Info

Muted (tint + border)

Primary Success Error Highlight Info

Glassy (80% opacity)

Primary Success Error Highlight Info

Variant + shape combinations

Outline + shapes

Square Rounded Scoop L Scoop R

Subtle + shapes

Square Rounded Scoop L Scoop R

Real-world combos

Completed In progress Failed Review

Tag labels

HTML CSS JS TS