CountPill

A round pill with a number in it: how many records are behind the thing it stands next to. Zero is drawn.

When to use it

A section heading or a tab is to carry a count — “Article structure 10”. The reader decides by it whether to go there at all.
The number is short. The pill is round, and a four-digit count turns it into an oval that fights the heading next to it.

When not to use it

It is a state, not a count (“in production”). That is IngotBadge — an upper-case label with letter-spacing, a different shape and a different meaning.
The number is the screen's main figure, not an afterthought. Large numbers with a caption are IngotMetrics.
The count can be pressed and filters something. Then it is IngotChip: the pill is text, not a control.

Properties

children: ReactNode — The number. Nothing else belongs in a pill this size.
onInk: boolean — On a dark surface — inside a dark panel or a pressed element.
label: string — What is being counted, for a screen reader, when the pill stands alone. Leave it out next to a heading — the text beside it already names it.
testId: string — An anchor for tests.