Skip to content

[Badge] Fix CVA defaultVariants, support ref as prop, and add variants #598

@ravisuhag

Description

@ravisuhag

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    componentIndividual component-level issuetriage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions