Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Counter
  3. API and Development

Counter

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Counter from @prepared911/ui/counter formats value with locale-aware grouping (no decimal digits) and centers it in a fully rounded pill. CounterSize selects Small or Regular text. CounterColor selects Selected or Resting, or one of the urgency ladder's solid status fills: Informative, Success, Warning or Destructive. Pass className to place the counter, for example to pin it over the control it counts for.
Props
NameTypeDefaultDescription
valuenumber | LocalizedMessage | DisplayValue—The tally to show. A number is formatted with locale digit grouping and no decimals, and its digits roll to each new value. A string is rendered as given, for a value the caller already formatted such as an abbreviation; it never rolls.
classNamestring—@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
colorCounterColor—Fill and numeral color. {@link CounterColor.Selected} paints --color-accent-fg with --color-fg-transient-default. {@link CounterColor.Resting} paints --color-fill-strong with --color-fg-default. {@link CounterColor.Destructive} paints --color-status-destructive-solid with --color-status-destructive-on-solid, for an urgent count. Defaults to {@link CounterColor.Selected}.
localestring—BCP 47 locale for formatting a numeric value. Defaults to the runtime locale, so a server rendered app that must match the client passes it explicitly.
refRef<HTMLSpanElement>—Ref to the rendered span.
rollbooleantrueRoll the digits of a numeric value to each new number. false renders the number as static text. A string value is always static.
sizeCounterSize—Height, padding, and type role. Defaults to {@link CounterSize.Regular}.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
Default
Subtle
Error
Solid error fill, for unread counts that need to pull the eye. The color is CounterColor.Destructive.
Design system color (@prepared911/ui)
Import Counter from @prepared911/ui/counter. CounterColor.Destructive is the solid destructive fill (--color-status-destructive-solid with --color-status-destructive-on-solid) for an urgent count. It is the one-to-one replacement for CounterColor.Error.
Previous color@prepared911/ui/counter
CounterColor.DefaultCounterColor.Selected
CounterColor.SubtleCounterColor.Resting
CounterColor.ErrorCounterColor.Destructive
Small
Both sizes
Large numbers
Previous
Counter / Usage
Next
Counter / Accessibility
On this page
Props
Storybook
Default
Subtle
Error
Design system color (@prepared911/ui)
Small
Both sizes
Large numbers