Counter

Accessibility

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.

What the component handles

Readable numerals. Clean, high-contrast numerical rendering.
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.

Counter / API and Development

Data list / Usage

On this page

What the component handles

What you must provide

Semantics and roles

Known caveats

Counter

Accessibility

What the component handles

Readable numerals. Clean, high-contrast numerical rendering.
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.

Counter / API and Development

Data list / Usage

On this page

What the component handles

What you must provide

Semantics and roles

Known caveats