Badge Component

A flexible badge component for labels, tags, status indicators, and other small informational elements. Supports multiple variants and sizes.

Variants

Primary

Secondary

Outline

Muted

<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="muted">Muted</Badge>

Sizes

Small

Medium

Large

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

Common Use Cases

Status Indicators

Live

Scheduled

Draft

Archived

Genre Tags

Rock

Pop

Jazz

Electronic

+3 more

Counts and Numbers

1.2M subscribers

42 posts

$25/month

<!-- Status Indicators -->
<Badge variant="primary" size="sm">Live</Badge>
<Badge variant="secondary" size="sm">Scheduled</Badge>
<Badge variant="outline" size="sm">Draft</Badge>

<!-- Genre Tags -->
<Badge variant="primary" size="sm">Rock</Badge>
<Badge variant="primary" size="sm">Pop</Badge>
<Badge variant="muted" size="sm">+3 more</Badge>

<!-- Counts -->
<Badge variant="secondary" size="sm">1.2M subscribers</Badge>
<Badge variant="primary" size="sm">$25/month</Badge>

Interactive Examples

Artist Profile

John Smith

1.5M subscribers

Rock

Alternative

Indie

$15/month

Live Tonight

Content Feed

New Album Released

New

Live Stream Starting

5 min

Concert Tickets Available

Limited

Props Reference

Prop	Type	Default	Description
children	React.ReactNode	required	Badge content
variant	'primary' \| 'secondary' \| 'outline' \| 'muted'	'primary'	Visual style variant
size	'sm' \| 'md' \| 'lg'	'sm'	Badge size
className	string	undefined	Additional CSS classes