feat: add notification badge to React components

[dylantarre]

Buoy test scenario: react-color-drift

[ahoybuoy]

🛟 Buoy Design Review

You're using a consistent set of colors for different states (default, success, warning, error). This is a great opportunity to define these as design tokens (e.g., --color-success, --color-warning). It'll make future updates easier and keep your UI consistent.

Tip: Consider grouping these colors into a theme object or CSS variables. That way, you can reuse them across components without hardcoding values.

---

Looking good overall! The structure of your component is clean, and the variant logic is well-organized. Keep it up!

---

Reply to this comment or mention @ahoybuoy to ask questions about your design system.

[ahoybuoy]

🛟 Buoy Design Review

You're using a consistent set of colors (#818CF8, #34D399, #FBBF24, #F87171, #FFFFFF) across your NotificationBadge component. These are great candidates for design tokens. For example, you could define --color-primary, --color-success, --color-warning, and --color-error to make these reusable and maintainable across your system.

Teaching moment: Design tokens are like variables for your design system. They help keep your UI consistent and make future updates easier. For instance, if you ever need to tweak the shade of your primary color, you’d only need to update the token, and the change would propagate everywhere it’s used.

---

Looking good overall! The structure of your component is clean, and you're already thinking about variants and states, which is a solid foundation for a design system.

---

Reply to this comment or mention @ahoybuoy to ask questions about your design system.