Default
Secondary
Destructive
Outline

Badge Component

A small status indicator component for highlighting items, tags, or labels.

  • Multiple variants: default, secondary, destructive, and outline
  • Compact and accessible design
  • Perfect for displaying status, categories, or counts

Installation

The Badge component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the badge in your project.

React TSX
1import { Badge } from "@/components/modern-ui/badge"

React TSX
1<Badge>Badge</Badge>

Examples

Default Badge

New

Secondary Badge

Secondary

Destructive Badge

Error

Outline Badge

Outline

Custom Styled Badge

Custom

API Reference

Badge Component Props

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline''default'Controls the visual style of the badge
classNamestring-Additional CSS classes to apply to the badge
childrenReactNode-The content of the badge

Additionally, the Badge component accepts all standard HTML div attributes.

CSS Classes

The badge uses the following CSS class variants:

Variant Classes

  • default: Primary color badge with background and white text
  • secondary: Secondary color badge with background and white text
  • destructive: Red/danger badge for highlighting errors or warnings
  • outline: Badge with a border and transparent background