[ [UI.11] Components ] Badge

Badge

> A versatile inline label component for displaying status, categories, or metadata with multiple style variants and sizes.

Import

[ [0x5B] IMPORT ]

1import { Badge } from "@/components/ui/badge";

Preview

[ [0x00] BADGE ]

Default Badge

1<Badge>Default Badge</Badge>

Variants

[ [0x00] VARIANTS ]

DefaultSecondaryAccentDestructiveNeutralOutline

1<Badge variant="default">Default</Badge>
2<Badge variant="secondary">Secondary</Badge>
3<Badge variant="accent">Accent</Badge>
4<Badge variant="destructive">Destructive</Badge>
5<Badge variant="neutral">Neutral</Badge>
6<Badge variant="outline">Outline</Badge>

[ [0x00] SIZES ]

SmallMediumLarge

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

[ [0x00] WITH ICONS ]

ApprovedRejectedWarningInfo

1<Badge variant="default">
2  <Check className="h-3 w-3" />
3  Approved
4</Badge>
5<Badge variant="destructive">
6  <X className="h-3 w-3" />
7  Rejected
8</Badge>

[ [0x00] STATUS INDICATORS ]

ActivePendingIn ProgressFailedDraftArchived

1<Badge variant="default">Active</Badge>
2<Badge variant="secondary">Pending</Badge>
3<Badge variant="accent">In Progress</Badge>
4<Badge variant="destructive">Failed</Badge>
5<Badge variant="neutral">Draft</Badge>
6<Badge variant="outline">Archived</Badge>

[ [0x00] REMOVABLE BADGES ]

ReactTypeScriptTailwind

1<Badge variant="secondary" className="cursor-pointer hover:bg-secondary/80">
2  React
3  <X className="h-3 w-3 ml-1" />
4</Badge>

[ [0x00] SIZE VARIANTS COMBINED ]

SmallSmallSmall

MediumMediumMedium

LargeLargeLarge

1<Badge variant="default" size="sm">Small</Badge>
2<Badge variant="secondary" size="md">Medium</Badge>
3<Badge variant="accent" size="lg">Large</Badge>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
variant	`"default" \| "secondary" \| "accent" \| "destructive" \| "neutral" \| "outline"`	`"default"`	Visual style variant of the badge
size	`"sm" \| "md" \| "lg"`	`"md"`	Size of the badge
asChild	`boolean`	`false`	Use Radix UI Slot to render as a different element
className	`string`	-	Additional CSS classes to apply

Accessibility

[ [0x58] A11Y ]

Badges use semantic span elements by default
Use descriptive text content that clearly indicates the badge's purpose
When badges are interactive, ensure they have proper hover states and cursor styling
Icons inside badges should be decorative - the text should convey the full meaning
Minimum py-1.5 (6px) vertical padding ensures touch-friendly spacing on mobile devices
Use appropriate color variants to convey meaning (destructive for errors, accent for warnings)

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Badge when:

• Displaying status or state (active, pending, completed)
• Labeling content with categories or tags
• Highlighting important metadata (new, beta, pro)
• Showing counts or quantities inline with text
• Compact visual indicators without full button emphasis

✗ Don't use when:

• Triggering actions (use Button instead)
• Long text content (badges should be 1-2 words max)
• Notification indicators (use Notification Badge for count bubbles)
• Important alerts (use Alert component for critical messages)

Variant Selection:

• default: Primary status or emphasis
• secondary: Muted or neutral status
• accent: Highlighted or important information
• destructive: Error states, warnings, negative status
• neutral: Subtle background, low emphasis
• outline: Minimal style, transparent background