🔴 Badge RS: Easy to Use Badge Components for WASM Frameworks
Je vous salue 👋! Every WASM app eventually needs a badge. The little red circle on your notification bell. The green dot on the corner of an avatar. The "99+" that taunts you every morning from the inbox icon. They're everywhere, and somehow everyone is still hand-rolling them. That stops today. We're shipping Badge RS . What Is Badge RS? Badge RS is a production-ready badge component for Yew ,…
Badge RS is a new badge component that simplifies the creation of notification counters, status dots, and overflow labels for Yew, Dioxus, and Leptos frameworks. This production-ready component handles positioning, sizing, color theming, and accessibility out of the box.
The core of Badge RS is the positioning wrapper, which wraps any element and turns it into a badge target using `position: relative; display: inline-flex;`. This approach ensures that the badge doesn't disrupt the layout, doesn't interfere with the accessibility tree, and doesn't require any CSS tricks to work.
The `Badge` component is the actual indicator. It accepts children to display a labeled badge with text inside or skips children to create a compact badge without extra props. There are also separate components for status dots that don't require any props.
Badge RS introduces a `Shape` enum to address the common issue of badges floating slightly off the corner of circular elements like avatars. By using `Shape::Circle`, the badge is positioned precisely on the arc, ensuring a flush fit on rectangular elements. This feature is crucial for maintaining visual consistency across different types of elements.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
