A small pill holding how many there are, such as the "3" after "Delays" in a filter chip or the "12" after "Lines" on a tab, set in tabular figures on an inset or tinted surface.
When to use
Use Count for how many there are, as a small pill after the words that say what it counts, in a filter chip, a tab or a heading.
Kongens Nytorv
Metro M1, M2 and M3.
Variants and states
| Rest | |
|---|---|
| Neutral | 12 |
| Success | 12 |
| Warning | 12 |
| Danger | 12 |
| Info | 12 |
- Rest12
- Rest12
- Rest12
- Rest12
- Rest12
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | The intent: what the count means. neutral is a plain tally, such as lines on a tab; the status intents tint the pill for a count of good or bad news, such as danger for lines with delays. Always beside words that say what is counted, such as "Delays": colour is never the only sign. |
children | ReactNode | — | The count, written as the screen shows it: 3, '1 204', '99+'. Leave it out when no data gives the count, and Count shows "—" and says "Unknown". 0 is a count, and shows. |
unknownLabel | string | The locale's | Overrides "Unknown", heard in place of "—" when there is no count |
className | string | — | Joined after pn-Count on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLSpanElement> | — | Reaches the root element |
color'neutral' | 'success' | 'warning' | 'danger' | 'info', default'neutral'- The intent: what the count means.
neutralis a plain tally, such as lines on a tab; the status intents tint the pill for a count of good or bad news, such asdangerfor lines with delays. Always beside words that say what is counted, such as "Delays": colour is never the only sign. childrenReactNode, default —- The count, written as the screen shows it:
3,'1 204','99+'. Leave it out when no data gives the count, and Count shows "—" and says "Unknown".0is a count, and shows. unknownLabelstring, default The locale's- Overrides "Unknown", heard in place of "—" when there is no count
classNamestring, default —- Joined after
pn-Counton the root styleCSSProperties, default —- Reaches the root
refRef<HTMLSpanElement>, default —- Reaches the root element
Use it
import { Count } from '@mylder/perron'Ask your agent
search_docs({ query: "Count" })Keyboard and ARIA
Count has no keys of its own and is never focusable. A caller who makes it a link or button through render brings that element's own keys, and its target size with them.
| Key | Does | From |
|---|---|---|
| None | Count is not focusable or operable | Perron |
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | None (generic <span>) | Not named; its text is read in place, after the words beside it: "Delays 3" | None |
The "—" in root, when unknown | Hidden: aria-hidden="true" | Not read | None |
The words in root, when unknown | Text, in VisuallyHidden | The owned string "Unknown", or unknownLabel | None |
What axe won't catch, from the contract, each with how this component meets it:
- Everything the eye is told, the ear is told, for every shape each prop accepts: the count is read as shown, as part of the text around it; "—" is
aria-hiddenand the ear hears "Unknown" in its place (CR-5). A statuscolortells the eye nothing the caller's words beside it don't say ("Delays 3"), and the review holds the stories to it (CR-9). - Every landmark and named region has an accessible name: none here; the root is not a landmark or region.
- Every default label can be overridden:
unknownLabel. - Every shape the type accepts renders, in every variant:
childrenis aReactNode; a number, a string, an element and a list each render,0and'0'are counts and not unknown (CR-4), andCount.test.tsxrenders each shape. The colour stories give a number or a string. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. The "—" isaria-hiddenbecause the words speak for it, not for animation. - Native semantics first: a plain
<span>, with no role and no ARIA beyondaria-hiddenon the "—"; the caller's own element throughrender. - Focus moves in reading order and returns on close: Count takes no focus and opens nothing.
- Every target is at least
size.target-minsquare: no target; Count is not pressed. The chip or tab it sits in is the target, and meets the size itself. - Loops stop when the system asks for less motion: none here; Count has no motion.
Owned strings
Every word Count shows comes from the caller, as children, but for the one it announces when there is no count.
| Key | English | Override | Seen or heard where |
|---|---|---|---|
unknown | "Unknown" | unknownLabel | root, heard in place of the aria-hidden "—" when there is no count (CR-5) |
unknown is the key packages/perron/src/locale/en.ts already has for Stat and FactList, with its Danish, Swedish and Norwegian; the build adds Count to its JSDoc line and adds no key.
With no count, Count shows "—" in color.text.tertiary on color.surface.inset, whatever its color, aria-hidden, followed by the owned string "Unknown" in VisuallyHidden, as Stat and FactList do. Content design writes "—" for unknown and the brand never shows a guess, so Count shows neither 0 nor nothing when the data is missing; a screen reader skips or spells a bare "—", so the ear gets "Delays Unknown". An unknown count says nothing good or bad, so it drops its status tint; color.text.tertiary is allowed for the "—" of an unknown figure, always next to stronger text, as Accessibility lists it. A caller who wants no pill at all renders no Count.
Do and don't
For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.
| Rule | Level | Do | Don't | Checked by |
|---|---|---|---|---|
| DD-1 | must | Put a Count after the words that say what it counts, with a space between them in the markup: Delays <Count>3</Count> | Leave the space out: the accessible name may run the words together, "Delays3" | review |
| DD-2 | must | Leave out children when no data gives the count, so Count shows "—" and says "Unknown" | Pass 0 or a guess when the count is unknown: the brand never claims more than the data knows | review |
| DD-3 | should | Render no Count when there is nothing to count and the screen hides empty tallies | Rely on Count to hide itself at 0, as MUI's Badge does: 0 is a count, and Count shows it | review |
| DD-4 | should | Write the count in the screen's locale, and cap it yourself if the space is short: '1 204', '99+' | Squeeze a long count into a narrow chip and let it overflow: Count never wraps or truncates | review |
| DD-5 | must | Use a status color for a count of good or bad news beside the words that name it, such as danger after "Delays" | Let the tint be the only sign, or colour a plain tally such as the number of lines on a tab | review |
| DD-6 | should | Use Stat for a key figure and Text with a data role for a number in a row or a sentence | Use Count as a key figure or inside running text as a number: it is a small pill for tallies in chips, tabs and headings | review |
| DD-7 | should | Use LineBadge to name a line | Put a line's name in a Count: it takes the operator's colour, not an intent | review |
| DD-8 | must | Announce a changed count in the screen's own polite live region, when it changes state | Make a Count a live region: a tally that updates every few seconds floods the screen reader | review |