Counter from @prepared911/ui-core 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.
What the component handles
- Readable numerals. Clean, high-contrast numerical rendering.
- Size variants. Scaled for tab items, nav items, and inline annotations.
- 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.
- Renders as an inline text span alongside the parent label.
- No role needed; the number announces naturally with the surrounding text.
- 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.
