raystack / raystack/apsara

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

Open
#598 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component triage
Dominant language
TypeScript
Stars
70
Forks
13
Avg merge
2d 5h
Merged PRs (30d)
8

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 (#672)
  • Forward HTML attributes (#674)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Badge component and its CVA configuration, then inspect how its current variants, defaults, children type, and ref handling are defined. The work is done when defaultVariants works without manual fallbacks, children can be omitted, ref support is consistent, and dot/indicator and outline variants are available.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.