Badge

Badge component with 7 variants (default, secondary, destructive, outline, ghost, link, verified), rounded-full styling, and overflow-clip. Includes BadgeNumber sub-component for circular number badges.

Figma: DS-001 Foundations · 26:169

Import

Live Demo

Badge variants and BadgeNumber component.

All variants

DefaultSecondaryDestructiveOutlineGhostLinkVerified

BadgeNumber variants

8531299

Variant × State matrix

VariantDefaultHover
DefaultDefaultDefault
SecondarySecondarySecondary
OutlineOutlineOutline
DestructiveDestructiveDestructive
VerifiedVerifiedVerified
GhostGhostGhost

Props

NameTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "verified""default"The visual style variant of the badge

Examples

Basic Badge

Badge Variants

7 different visual styles including verified.

Badge Number

Circular number badge for counts and notifications.