Badge

Ready

Status indicators and labels with multiple variants, sizes, and icon support

Variants

Nine badge variants for different contexts

Default
Primary
Secondary
Success
Warning
Error
Info
Violet
Outline

Sizes

Four badge sizes: small, medium, large, and extra large

Small
Medium
Large
Extra Large

With Dot Indicator

Add a status dot for visual clarity

Active
Pending
Offline
In Progress
Beta

With Icons

Add icons for better visual communication

Verified
Rejected
Warning
Info
Featured
New

Borderless

Clean look without borders

Primary
Secondary
Success
Warning
Error
Info
Violet

Shapes

Default rounded and pill shapes

Default (6px radius)

Primary
Success
Warning

Pill (fully rounded)

Primary
Success
Warning

Real-World Examples

Common badge usage patterns

Server Status
Online
Database
Maintenance
API Service
Down
v2.0
New features available
Featured
In Stock
New Arrival
Limited

Usage

How to use the Badge component

// Basic Badge
<Badge>Default</Badge>

// Variants
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="violet">Violet</Badge>
<Badge variant="outline">Outline</Badge>

// Sizes
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
<Badge size="xl">Extra Large</Badge>

// With Dot Indicator
<Badge variant="success" dot>Active</Badge>
<Badge variant="error" dot>Offline</Badge>

// With Icon
<Badge variant="primary" icon={<Star className="w-3 h-3" />}>
  Featured
</Badge>

// Pill Shape
<Badge shape="pill">Rounded</Badge>

// Custom Dot Color
<Badge dot dotColor="var(--color-emerald-500)">
  Custom Color
</Badge>

API Reference

Props

variant-"default" | "primary" | "secondary" | "success" | "warning" | "error" | "info" | "violet" | "outline" (default: "default")
size-"sm" | "md" | "lg" | "xl" - Badge size (default: "md")
shape-"default" | "pill" - Badge shape (default: "default")
icon-ReactNode - Optional icon to display before the label
dot-boolean - Show status dot indicator
dotColor-string - Custom dot color (overrides variant color)
bordered-boolean - Show/hide border (default: true)
className-string - Additional CSS classes

Features

  • Nine semantic variants
  • Four sizes (sm, md, lg, xl)
  • Optional dot indicator for status
  • Icon support
  • Two shapes (default 6px, pill fully rounded)
  • Custom dot colors
  • Borderless option
  • Dark mode support