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

React badge component variants with tailwind css

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

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


Flexy UI Newsletter

Build better and faster UIs.Get the latest Tailwind UI components directly in your inbox. No spam!