Prepared Docs

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 Default, Subtle, or Error styling. Pass className to place the counter, for example to pin it over the control it counts for.

Props

Name	Type	Default	Description
`value`	`string \| number`	—	The numeric value to display
`className`	`string`	—	Class applied to the counter root. Use it to place the counter, for example to pin it over an icon as an unread badge.
`color`	`CounterColor`	`CounterColor.Default`	The color of the counter
`size`	`CounterSize`	`CounterSize.Regular`	The size of the counter

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Subtle

Error

Solid error fill, for unread counts that need to pull the eye.

Small

Both sizes

Large numbers

Counter / Usage

Counter / Accessibility

Props

Name	Type	Default	Description
`value`	`string \| number`	—	The numeric value to display
`className`	`string`	—	Class applied to the counter root. Use it to place the counter, for example to pin it over an icon as an unread badge.
`color`	`CounterColor`	`CounterColor.Default`	The color of the counter
`size`	`CounterSize`	`CounterSize.Regular`	The size of the counter