Add a Badge/Pill primitive to the design system and adopt it for counts and tiers

[1nonlypiece]

📌 Description

Count and tier indicators (urgency badges in VaultCard.tsx, the planned unread
count on the notification bell, queue counts) are styled inline and inconsistent.
StatusChip covers statuses, but there's no generic small Badge primitive for
numbers and labels.

This issue adds a Badge primitive and adopts it for count/tier indicators.

🎯 Requirements and Context

• Add src/components/Badge.tsx with tone (neutral/info/success/warning/
  danger) and size props mapped to tokens.
• Adopt it for the urgency badge in VaultCard.tsx.
• Accessible: numeric badges expose an aria-label describing the count.
• Token-styled; no hardcoded colors.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/badge-primitive

2. Implement changes

• Create src/components/Badge.tsx; adopt in VaultCard.tsx.
• Add src/components/__tests__/Badge.test.tsx.
• Document it in design-system/documentation/status-chip.md.

3. Test and commit

• Run npm test.
• Cover edge cases: each tone/size, numeric aria-label, zero-count handling.

Example commit message

feat: add Badge primitive and adopt for urgency badge

✅ Guidelines

• Minimum 95% test coverage on new/changed lines.
• No regressions in VaultCard tests.
• Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

• Join the Disciplr contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/xvNAvMJf
• Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
• Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

[Ericoluchukwu]

@Ericoluchukwu has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issues because I'm a developer and I'm so good at it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ericoluchukwu to this issue.

[drips-wave]

Congratulations, @Ericoluchukwu! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @Ericoluchukwu: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊