Component · Feedback · 16
Badge
Badge = a small tinted label that marks status or count; it never carries a click action.
v0.3.0NewActivePendingFailed
Done
What is a Badge?
A badge is a short status. Name the variants, the tint recipe, and whether it carries a dot or a close icon.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- The text that names a field; keep it short and place it above the input.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Container
- 02 Dot
- 03 Text
- 04 Remove icon
When to use
- Status columns in tables — active, pending, failed
- Meta info on list items — versions, tags, counts
- Filter chips the user can dismiss
Avoid when
- Labels longer than two words — use plain text
- The only way to trigger an action — use a Button
- More than five badges in one row
See also
Create a badge component.
STYLE
- pill shape, 12px monospace text
- five tinted variants: purple, blue, green, orange, red
- each variant: 10% tinted background with solid matching text
- one badge carries a solid 6px status dot
STATES
- default, removable with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui