Counter from @prepared911/ui/counter is a small numeric tally shown beside a label. The component renders plain numerals; your job is to keep the count announced once, scale abbreviations cleanly, and treat zero with care. An urgent count uses CounterColor.Destructive. The color supplements the label; it is not the only cue.
Size variants. Scaled for tab items, nav items, and inline annotations.
What you must provide
A single announcement. The parent label (tab, nav item, button) announces alongside the counter. Don't duplicate the number in both the label string and an aria-label.
Abbreviation at the product level. For counts that overflow the available space (99+ vs 9 000), decide where the abbreviation happens in your data layer so the visible and announced values stay in sync.
Zero-state decision. Decide whether a zero count shows the counter or hides it; either is valid, but stay consistent across the surface.
Semantics and roles
Renders as an inline text span alongside the parent label.
No role needed; the number announces naturally with the surrounding text.
Known caveats
Live updating counters. If the count changes while the user is on the page, wrap the parent region in aria-live="polite" so rotor users notice—don't wrap only the counter, or the context is lost.
Counter inside an icon-only control. Ensure the icon-only control has its own accessible name; the counter supplements, not replaces, the label.