React Component KitReact

Badge

Variants

Solid, soft, outline, neutral and semantic tones.

SolidSoftOutlineNeutralSuccessWarningDestructive

API

Prop	Type	Default	Description
variant	"solid" \| "soft" \| "outline" \| "neutral" \| "success" \| "warning" \| "destructive"	soft	Visual style, including semantic status tones.
size	"xs" \| "sm" \| "md" \| "lg"	md	Padding and font size.
dot	boolean	—	Shows a status dot before the label for live indicators.
asChild	boolean	false	Render the child element instead of a <span>.
className	string	—	Merged with the generated variant classes.

View full API on Badge

More Badge examples

SizesExtra small through large at a consistent variant.Status dotLive indicators with the `dot` prop.Layout useBadges paired with labels at different sizes.As linkStyled anchors via `badgeVariants` for tag navigation.