Skip to the content

Kongens Nytorv

Metro M1, M2 and M3.

12

Variants and states

Rest
Neutral
12
Success
12
Warning
12
Danger
12
Info
12
Neutral
  • Rest
    12
Success
  • Rest
    12
Warning
  • Rest
    12
Danger
  • Rest
    12
Info
  • Rest
    12

Props

NameTypeDefaultDescription
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.
childrenReactNode—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.
unknownLabelstringThe locale'sOverrides "Unknown", heard in place of "—" when there is no count
classNamestring—Joined after pn-Count on the root
styleCSSProperties—Reaches the root
refRef<HTMLSpanElement>—Reaches the root element
color'neutral' | 'success' | 'warning' | 'danger' | 'info', default '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.
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". 0 is 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-Count on 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.

KeyDoesFrom
NoneCount is not focusable or operablePerron
ElementRoleAccessible name fromStates announced
rootNone (generic <span>)Not named; its text is read in place, after the words beside it: "Delays 3"None
The "—" in root, when unknownHidden: aria-hidden="true"Not readNone
The words in root, when unknownText, in VisuallyHiddenThe owned string "Unknown", or unknownLabelNone

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-hidden and the ear hears "Unknown" in its place (CR-5). A status color tells 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: children is a ReactNode; a number, a string, an element and a list each render, 0 and '0' are counts and not unknown (CR-4), and Count.test.tsx renders each shape. The colour stories give a number or a string.
  • A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The "—" is aria-hidden because the words speak for it, not for animation.
  • Native semantics first: a plain <span>, with no role and no ARIA beyond aria-hidden on the "—"; the caller's own element through render.
  • Focus moves in reading order and returns on close: Count takes no focus and opens nothing.
  • Every target is at least size.target-min square: 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.

KeyEnglishOverrideSeen or heard where
unknown"Unknown"unknownLabelroot, 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.

RuleLevelDoDon'tChecked by
DD-1mustPut 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-2mustLeave 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 knowsreview
DD-3shouldRender no Count when there is nothing to count and the screen hides empty talliesRely on Count to hide itself at 0, as MUI's Badge does: 0 is a count, and Count shows itreview
DD-4shouldWrite 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 truncatesreview
DD-5mustUse 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 tabreview
DD-6shouldUse Stat for a key figure and Text with a data role for a number in a row or a sentenceUse Count as a key figure or inside running text as a number: it is a small pill for tallies in chips, tabs and headingsreview
DD-7shouldUse LineBadge to name a linePut a line's name in a Count: it takes the operator's colour, not an intentreview
DD-8mustAnnounce a changed count in the screen's own polite live region, when it changes stateMake a Count a live region: a tally that updates every few seconds floods the screen readerreview