{
  "id": 10201419,
  "title": "🔴 Badge RS: Easy to Use Badge Components for WASM Frameworks",
  "url": "https://urgent.news/2026/09/27/badge-rs-easy-to-use-badge-components-for-wasm-frameworks",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-27T11:08:44.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/wiseai/badge-rs-easy-to-use-badge-components-for-wasm-frameworks-4p3k"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nThe `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.\n\nBadge 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.",
  "summary": "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 ,…",
  "key_points": [
    "Badge RS simplifies creation of notification counters for Yew, Dioxus, Leptos",
    "Handles positioning, sizing, color theming, accessibility out of the box",
    "Shape enum ensures badges fit precisely on circular elements"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}