| Framework | Live Demo |
|---|---|
| Yew | |
| Dioxus | |
| Leptos |
A highly customizable, accessible badge component for WASM frameworks: Yew, Dioxus, and Leptos. Supports notification counts, status dots, labels, multiple colors, variants, sizes, and placements with full WCAG compliance.
- 🎨 Fully Customizable: Control color, variant, size, placement, class, style, and ARIA labels.
- 🔴 Dot Mode: When no children are provided the badge renders as a compact status dot.
- 📍 Smart Placement: Four corner placements (
top-right,top-left,bottom-right,bottom-left) via CSStransformfor pixel-perfect positioning. - ♿ Accessible by Default:
role="status",aria-label, andaria-atomicwired up automatically. - 🧩 Framework Agnostic: Same API semantics across Yew, Dioxus, and Leptos.
Refer to our guide to integrate this component into your Yew app.
Refer to our guide to integrate this component into your Dioxus app.
Refer to our guide to integrate this component into your Leptos app.
Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Badges RS better.
- Fork the repository.
- Create a new branch for your feature/bugfix.
- Submit a pull request for review.
Badges RS is licensed under the MIT License. You are free to use, modify, and distribute this library in your projects.
