# Counter

Shows how many items wait behind a control, as a small number the reader can bring down by acting.

* Kind: component
* Page: https://design.werklist.com/components/counter
* Version: 2.1.2

## When to use it

* Unread notifications on a header button.
* New applications in a view, beside its name.

## When not to use it

* Totals that only describe, such as the candidates on a board.
* Navigation and marketing pages.
* Zero or negative numbers.

## Rules

* A counter only for items the reader can bring down by acting.
* The name of the control pairs the number with what it counts.
* Red only for items that need attention, never for a total that can wait.

## Anatomy

* Height: 17 px
* Minimum width: 17 px
* Padding: 4 px at the sides (--space-1)
* Radius: 6 px (--radius-md)
* Numerals: 10.5 px, weight 700, tabular, line height 1
* On a button: 6 px above the top edge of the button and 4 px past its end, with a 2 px ring in the resting fill of the button
* Beside a label: 8 px after the label (--space-2)
* Attention (--badge-alert, --badge-alert-ink)
* New (--track-tint, --assign-accent)
* Plain: on a --surface-control ground the fill is --surface-1 (--chip-fill, --chip-ink)

## Variants

* attention: Unread items that need action, in the same red in both themes.
* new: Items that arrived since the reader last opened the view. It turns plain once the view is opened.
* plain: A count the reader may act on without urgency.

## States

* hidden: the count is zero
* shown: grows in over 150 ms, without motion under reduced motion (--duration-fast, --ease-standard)

## Accessibility

* The number is hidden from screen readers. The name of the control carries it with what it counts, such as Applications, 12 in this view, new since you last opened it.
* No focus of its own.
* A change of count updates the name of the control and is not announced.
* In forced colors mode the numerals keep the text color inside a 1 px outline.

## Content

* 0 hides the counter.
* 1 to 999 exact.
* 1,000 to 9,999 as thousands with one decimal, rounded down: 1.9k.
* 10,000 and above: 10k+.
* Numbers take the same form in every language.

## Tokens

* --badge-alert
* --badge-alert-ink
* --track-tint
* --assign-accent
* --chip-fill
* --chip-ink
* --surface-1
* --radius-md
* --space-1
* --space-2
* --duration-fast
* --ease-standard