Badge

A small label or tag component used for status indicators, categories, highlights, and similar purposes. It supports multiple visual variants.

Use Cases

• Status indicators (New, Active, Pending, Completed)
• Category tags
• Labels and highlights
• Count indicators
• Feature tags (Pro, Beta, Premium)

Properties

children

Badge text content - should be short (1-2 words). Type: string.

variant

Visual style variant. Type: string. Options: default, secondary, outline, destructive. Default: default.

Visual Impact: default – Solid background, high contrast - prominent badge; secondary – Muted background - subtle badge; outline – Border only, transparent background - minimal badge; destructive – Red/warning color - error or warning indicator.

Recommendations: status – Use ‘default’ for active/featured status; subtle – Use ‘secondary’ for category tags; minimal – Use ‘outline’ for low-emphasis labels; warnings – Use ‘destructive’ for errors, warnings, or negative status.

size

Badge size. Type: string. Options: sm, md, lg.

Best Practices

• Use variant: ‘default’ for neutral badges
• Use variant: ‘secondary’ for subtle badges
• Use variant: ‘destructive’ for warnings or errors
• Keep text short (1-2 words, max 10 characters)
• Use for highlighting, not as primary content

Common Mistakes

Using long text in badges (3+ words)

Why it's a problem: Badges designed for short labels - long text looks cramped and unprofessional

Fix: Keep badge text to 1-2 words max (New, Active, Pro, Featured)

Using badges as primary content

Why it's a problem: Badges are accent elements for highlighting - not for main content

Fix: Use badges to supplement primary content (headings, text), not replace it