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.

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 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

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.

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

Feel free to find me on LinkedIn if you have any component requests or suggestions.