Badge
Pill for metadata, status, and inline labels. Seven variants spanning neutral brand-light, dark brand, lime accent, and the semantic states. Three shapes (pill / badge / modern) and three sizes.
Configurator
Pick any combination of variant, shape, size, and leading or trailing content. Code regenerates live.
<Badge>
<BadgeDot />
Bestseller
</Badge>Variants
Seven colour-and-tone combinations. Neutral is the BTNG replacement for Untitled UI's Gray (brand-light tint). Brand is the dark filled variant. Accent is our lime callout.
Shapes
pill (fully rounded), badge (slight square), modern (badge shape plus the 3-layer skeu depth from Button).
Sizes
sm (20 tall) · md (24, default) · lg (28).
Leading dot
The BadgeDot helper renders a small filled circle that inherits the badge text colour. Use for status indicators.
With icons
Drop any Phosphor icon as a child. Icons auto-size to 12px and inherit the badge text colour.
Reasoning
The Untitled UI Badge set ships 666 variants across Size × Type × Icon × Color (12 colours, 3 types, 3 sizes, 7 icon modes). I collapsed the colour axis to seven that map to BTNG's monochrome palette and one signal-lime accent, and folded the icon axis into children so the consumer decides what to drop inside.
The BTNG-specific renames:
- neutral replaces Untitled's “Gray”. It is actually a brand-light tint — brand-100 background, brand-800 text, brand-200 border. Soft and cohesive with the monochrome palette.
- brand is new. Dark filled: brand-800 background, brand-900 border. Use for the load-bearing status pill where neutral wouldn't catch the eye.
- accent is new and BTNG-specific. Lime-300 background, lime-400 border. The loudest badge we ship. Reserve for one-off callouts like “New”, “Bestseller”, or the signature flag on a product card.
Three shapes give you tonal control over how assertive a badge feels. Pill is default and friendliest; badge is tighter and reads as metadata; modern adds the 3-layer skeu depth from Button, which grounds badges that sit on busy backgrounds.