Back to components
UI component
Badge
Compact status badge with solid, outline, and subtle variants for tags, counts, and labels.
Install
What it does
- 3 variants: solid, outline, subtle
- Small compact size for inline display
- Custom text and background colors via props
When to use
Use it
Status indicators, notification counts, tag labels, discount badges on product cards.
Skip it
Interactive elements (use a Pressable with badge styling).
Files & routes added
- components/ui/badge.tsx