Badge
Free
Displays a badge or label with various styles and sizes. Perfect for status indicators, tags, and notification counts.
Installation
Install via CLI
moonui add badgeUsage
Badge
Examples
Variants
All available badge variants for different use cases
Default
Secondary
Outline
Destructive
Success
Warning
Sizes
Different badge sizes for various contexts
Small
Medium
Large
With Icons
Badges with icons for enhanced visual context
✓Approved
⏰Pending
Removable×
Status Badges
Badges for different status indicators
Active
Pending
Draft
Expired
Notification Badges
Small badges for notification counts
3
99+
NEW
Dark Mode Support
Badges adapt to light and dark themes
Light Mode
Default
Secondary
Outline
Destructive
Dark Mode Preview
Default
Secondary
Outline
Destructive
Category Tags
Badges used as category or topic tags
React
TypeScript
Next.js
Tailwind CSS
Radix UI
Label Badges
Badges for labeling and categorization
Priority:
High
Medium
Low
Environment:
Production
Staging
Development