-
Notifications
You must be signed in to change notification settings - Fork 13
Open
Labels
Description
Summary
Improvements to the Badge component to fix a CVA configuration bug, improve component API consistency, and add flexibility.
Improvements
1. Fix defaultVariants placement in CVA
defaultVariants is incorrectly nested inside variants instead of being a sibling. CVA's defaults aren't working — the component only works because of manual fallbacks in the destructuring (variant = 'accent').
3. Make children optional
The type mandates children: ReactNode but a badge could be icon-only or dot-only.
5. Add dot/indicator variant
Common badge pattern for notification dots (no text, just a colored circle).
6. Add outline variant
Many design systems include an outline/bordered badge variant alongside solid and soft.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (Replace hardcoded CSS values with design tokens #672)
- Forward HTML attributes (Forward HTML attributes (spread rest props) #674)
Reactions are currently unavailable