Badge
Displays a badge or label with various styles and sizes. Perfect for status indicators, tags, and notification counts.
Installation
Install via CLI
npx @moontra/moonui-cli add badgeUsage
Examples
Corner Radius
The radius prop controls corner rounding independently of size — pill by default, or squared off to match a denser UI
Status Dot and Leading Icon
withDot prefixes a small status dot; leftIcon accepts any node when a dot is not specific enough
Removable Filter Tags
removable adds a dismiss control and calls onRemove — the usual shape for active filters above a table or list
In Context: List Rows
Badges earn their keep inside a container — here they carry row status without competing with the primary label
Variants
All available badge variants for different use cases
Sizes
Different badge sizes for various contexts
With Icons
Badges with icons for enhanced visual context
Status Badges
Badges for different status indicators
Notification Badges
Small badges for notification counts
Dark Mode Support
Badges adapt to light and dark themes
Category Tags
Badges used as category or topic tags
Label Badges
Badges for labeling and categorization