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 confirmations
• warning – for alerts or caution messages
• info – for general informative badges
• error – for failure or error states
• neutral – 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 emphasis
• outline – bordered with no background for subtle emphasis
• light – light background with a darker text color, providing a softer and more delicate look than solid

Tailwind Status Badge Component Code

Customization Options

• Change shape: Use rounded-full instead of rounded-b-2xl rounded-tl-2xl to create pill-shaped badges.
• Add new variants: Easily extend the badgeVariants object to support additional colors like purple, 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.