React Tailwind Badges 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

React Tailwind Badge

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 also supports two style modes:

• solid – filled background with contrasting text
• outline – bordered with no background

React Tailwind 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: You can easily extend the badgeVariants object to support more color styles like purple, blue, etc.

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