Badge
Small labeled UI element for displaying status, categories, or counts. Multiple variants (default, secondary, destructive, outline, success, warning) for different contexts with consistent rounded styling.
Live Preview
Variants
Badge Variants
Available badge styles for different contexts
Status
Status Indicators
Visual status badges for states and conditions
Roles
User Roles
Display user permissions and access levels
Notifications
Notification Badges
Display counts and notification indicators
Features
Feature Labels
Highlight feature states and availability
Real World
Product Information
Badges combined with text in context
Usage Guidance
✓ When to Use
Use for status indicators, tags/labels, categories, counts/numbers, new/beta labels, user roles, notification badges. Best for compact, scannable information display.
✗ When NOT to Use
Don't use for buttons (use Button instead), large status messages (use Alert), form labels (use label element), or navigation items (use nav links).
Props
classNamestylechildrenonClickonChange