React Tailwind Badge Component for Tags, Status, and Updates
A badge is a small UI element used to highlight short pieces of information. Badges are commonly used to indicate status, tags, labels, or updates on items in a user interface.
They are compact, colorful, and serve as visual cues for users to take note of something quickly.
Common Use Cases
- Mark an item as "New" or "Updated"
- Show a status like "In Progress", "Completed", etc.
- Add labels or tags to blog posts or products
- Display user roles or levels (e.g., "Admin", "Pro")
- Highlight notifications or unread messages
Status Badge Components
Available Variants
The Badge
component supports multiple color variants to represent different statuses:
success
– used for positive status or confirmationswarning
– for alerts or caution messagesinfo
– for general informative badgeserror
– for failure or error statesneutral
– for a default or subtle look
Styles
The component now supports three style modes to fit different UI needs:
solid
– filled background with contrasting text for strong emphasisoutline
– bordered with no background for subtle emphasislight
– light background with a darker text color, providing a softer and more delicate look than solid
Tailwind Status Badge Component Code
Badge Variants Demo
Success Variant
success - solidsuccess - outlinesuccess - light
Warning Variant
warning - solidwarning - outlinewarning - light
Info Variant
info - solidinfo - outlineinfo - light
Error Variant
error - soliderror - outlineerror - light
Neutral Variant
neutral - solidneutral - outlineneutral - light
Customization Options
- Change shape: Use
rounded-full
instead ofrounded-b-2xl rounded-tl-2xl
to create pill-shaped badges. - Add new variants: Easily extend the
badgeVariants
object to support additional colors likepurple
,blue
, and more. - Try the new light style: Use the
light
style to achieve a soft background effect with slightly darker text, perfect for subtle emphasis.
Feel free to find me on LinkedIn if you have any component requests or suggestions.