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. Place counters with layout props on a parent Box or FlexBox, or request a missing layout case via find-pattern; className is not part of the public API.
Props
Name
Type
Default
Description
value
number | 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.
color
CounterColor
—
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}.
locale
string
—
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.
ref
Ref<HTMLSpanElement>
—
Ref to the rendered span.
roll
boolean
true
Roll the digits of a numeric value to each new number. false renders the number as static text. A string
value is always static.
size
CounterSize
—
Height, padding, and type role. Defaults to {@link CounterSize.Regular}.
Storybook
Interactive examples and edge cases for this component are in Storybook.
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.