Badge - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/badge

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Badge } from "@/components/ui/badge"

<Badge variant="default">Badge</Badge>

Examples

Variants

All badge style variants.

With Icon

Badge with a verified icon.

Circular

Circular badges with numbers.

With Dot

Badges with colored dot indicators.

Closable

Dismissible badge.

Status tones

Semantic status tones with the pill shape — the shared status-label treatment.

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "positive" \| "warning" \| "muted"`	`"default"`	The visual style variant.

ShootingIn ReviewPending ApprovalHoldWrapped