Component

Badge

Compact label for status, categorization or counts. Supports icons, loading spinners, and rendering as a link.

variantdefault · secondary · destructive · outline · ghost · link

renderrenders as a different element, e.g. an anchor

Playground

Badge

Variant— variant

Label— label

DefaultSecondaryDestructiveOutlineGhostLink

data-icon="inline-start" / "inline-end"

VerifiedBookmark

Spinner in place of an icon

DeletingGenerating

renders the badge as an <a>

BlueGreenSkyPurpleRed

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

10 semantic tokens consumed by this component.

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--primary-foregroundPrimary Foreground

text-primary-foregroundbg-primary-foreground

--secondarySecondary

bg-secondarytext-secondaryborder-secondary

--secondary-foregroundSecondary Foreground

text-secondary-foreground

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--borderBorder

border-borderborder

--foregroundForeground

text-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--ringRing

ring-ringring