Badge

A flexible React component for displaying a status or label with a colored dot. Easily customize its color, text, and style to fit nearly any UI—great for status indicators, tags, notifications, or compact labels.

Inspired by composable badge components commonly seen in modern design systems.

Live Preview

Installation

You can install the Badge component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/badge.json

Import

To use the Badge component, import it in your code:

typescript-icon
1import Badge from '@/components/Badge';

Props

The Badge component accepts the following props:

PropTypeDefaultDescriptionRequired
labelstring-The text to display inside the badge.Yes
variant'green' | 'cyan' | 'red' | 'blue' | 'yellow' | 'purple''green'The color theme for the badge.No
classNamestring-Additional utility classes for fine-tuning the badge.No

Example usage

Basic

typescript-icon
1<Badge label="Active" />

Custom color variant

typescript-icon
1<Badge label="Error" variant="red" />

With custom utility classes

typescript-icon
1<Badge label="VIP" variant="purple" className="font-semibold" />

Color Variants

The badge comes in six variants: green, cyan, red, blue, yellow, and purple.

This lets you easily match the badge color to specific meanings or UI accents.

typescript-icon
1<>
2  <Badge label="Green" variant="green" />
3  <Badge label="Cyan" variant="cyan" className="ml-2" />
4  <Badge label="Red" variant="red" className="ml-2" />
5  <Badge label="Blue" variant="blue" className="ml-2" />
6  <Badge label="Yellow" variant="yellow" className="ml-2" />
7  <Badge label="Purple" variant="purple" className="ml-2" />
8</>

Features

  • Variants: Choose from green, cyan, red, blue, yellow, or purple
  • Compact: Minimal size, perfect for lists, status chips, or overlays
  • Colorful, theme-aware design: Adapts to light/dark backgrounds via Tailwind
  • Customizable: Change the badge or dot style with props or className
  • Accessible: Just text and native div/aria for easy adaptation

Customization

  • Dot color: Tweak or expand dotBgByVariant inside the Badge component
  • Badge style: Add or override classes with the className prop for padding, font, or sizing
  • New variants: Expand the badgeVariants color map for custom brands or context codes

Troubleshooting

  • If you see no colored dot, ensure your Tailwind config includes all used utility classes.
  • If the badge color doesn’t appear, check your variant and class assignments.
  • You can add more variants or adjust default styles by editing the component source.