Skip to the content

Props

NameTypeDefaultDescription
variant'live' | 'ageing' | 'estimated' | 'timetable-only' | 'no-signal''live'How fresh the vehicle's data is, as Data states names it: the dot's shape and the word beside it. Set on the root as data-variant, and passed to the dot.
line'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional'—The vehicle's line, which gives the dot its colour: a metro line (m1 to m4), an S-tog line (a to h), any bus (bus), or any regional or Øresund train (regional). Set on the root as data-line, and passed to the dot. Left out, with no default, neither sets data-line and the dot draws in the word's colour, for a label that stands for a state across many lines.
liveLabelstringThe locale'sOverrides "Live", the word shown when variant='live'
ageingLabelstringThe locale'sOverrides "Ageing", the word shown when variant='ageing'
estimatedLabelstringThe locale'sOverrides "Estimated", the word shown when variant='estimated'
timetableOnlyLabelstringThe locale'sOverrides "Timetable only", the word shown when variant='timetable-only'
noSignalLabelstringThe locale'sOverrides "No signal", the word shown when variant='no-signal'
classNamestring—Merged after pn-VehicleDotLabel on the root
styleCSSProperties—Reaches the root
refRef<HTMLSpanElement>—Reaches the root
variant'live' | 'ageing' | 'estimated' | 'timetable-only' | 'no-signal', default 'live'
How fresh the vehicle's data is, as Data states names it: the dot's shape and the word beside it. Set on the root as data-variant, and passed to the dot.
line'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional', default —
The vehicle's line, which gives the dot its colour: a metro line (m1 to m4), an S-tog line (a to h), any bus (bus), or any regional or Øresund train (regional). Set on the root as data-line, and passed to the dot. Left out, with no default, neither sets data-line and the dot draws in the word's colour, for a label that stands for a state across many lines.
liveLabelstring, default The locale's
Overrides "Live", the word shown when variant='live'
ageingLabelstring, default The locale's
Overrides "Ageing", the word shown when variant='ageing'
estimatedLabelstring, default The locale's
Overrides "Estimated", the word shown when variant='estimated'
timetableOnlyLabelstring, default The locale's
Overrides "Timetable only", the word shown when variant='timetable-only'
noSignalLabelstring, default The locale's
Overrides "No signal", the word shown when variant='no-signal'
classNamestring, default —
Merged after pn-VehicleDotLabel on the root
styleCSSProperties, default —
Reaches the root
refRef<HTMLSpanElement>, default —
Reaches the root

Use it

import { VehicleDotLabel } from '@mylder/perron'

Ask your agent

search_docs({ query: "VehicleDotLabel" })

Keyboard and ARIA

No Base UI part, so nothing from Base UI here: the label is text, takes no focus and does nothing when pressed. A caller who makes a row interactive puts the label inside a button or link, which takes the focus.

KeyDoesFrom
TabPasses the label by to the next focusable element: it has no tab stop (CR-6)Perron
ElementRoleAccessible name fromStates announced
rootnone: a generic <span>Not named; its text is read in place, as part of the row, cell or strip it sits innone
dothidden, aria-hidden="true" on its rootNot read: the label beside it says the same (VehicleDot's CR-6)none
labeltextThe owned string for its variant (live, ageing, estimated, timetableOnly, noSignal), or the caller's *Labelnone

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 dot's shape says the state, and the label says it in words for every variant; the dot is aria-hidden because the word beside it carries the same meaning. The line colour is not named: the caller names the line in words nearby, as Semantic colours asks.
  • Every landmark and named region has an accessible name: none here; the label is inline text, not a region.
  • Every default label can be overridden: liveLabel, ageingLabel, estimatedLabel, timetableOnlyLabel and noSignalLabel.
  • Every shape the type accepts renders, in every variant: every variant has its story, and a label with no line has NoLine; a *Label string replaces only its own state's word, and an undefined one keeps the locale's (CR-4); a long word wraps inside the label in the Wrapping story. VehicleDotLabel takes no ReactNode.
  • A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The dot is aria-hidden because the word speaks for it, not for animation.
  • Native semantics first: a <span> holding the dot and a <span> of text, no role, and no ARIA beyond the dot's aria-hidden.
  • Focus moves in reading order and returns on close: the label takes no focus and opens nothing; Tab passes it by.
  • Every target is at least size.target-min square: no target; a pressable vehicle is the caller's button or link around the label, which meets the minimum itself.
  • Loops stop when the system asks for less motion: none here; the label has no motion.

Owned strings

Every word VehicleDotLabel shows is its own; the caller gives only variant and line. All five keys exist in packages/perron/src/locale/en.ts, held to the table in Content design, and VehicleDot already uses them; VehicleDotLabel adds none.

KeyEnglishOverrideSeen or heard where
liveLiveliveLabellabel when variant='live', seen and read as shown
ageingAgeingageingLabellabel when variant='ageing', seen and read as shown
estimatedEstimatedestimatedLabellabel when variant='estimated', seen and read as shown
timetableOnlyTimetable onlytimetableOnlyLabellabel when variant='timetable-only', seen and read as shown
noSignalNo signalnoSignalLabellabel when variant='no-signal', seen and read as shown

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-1shouldUse VehicleDotLabel wherever a vehicle's data state is shown, so its dot and its word always come togetherSet a VehicleDot beside your own word for the state: the word could drift from content design's, and be heard twicereview
DD-2mustName the line in words nearby, such as in a LineBadgeLet the dot's colour be the only sign of the line: several line colours miss 3:1 on the light surfacesreview
DD-3mustPut a time beside the label, such as "since 08:02" after "No signal", in your own textOverride a *Label to add the time or to rename a state: the five words are the same on every screen, in every languagereview
DD-4mustWork out the state from the report's age with the app's thresholds, by default vehicle-dot.live-threshold and vehicle-dot.ageing-thresholdPass live for a vehicle whose last report is minutes old: the label would claim more than the data knowsreview
DD-5shouldUse VehicleDotLegend to explain all five states togetherStack VehicleDotLabels as a legend: a legend lists all five states in Data states' order, even one with no vehiclesreview
DD-6mustWrap the label in a Perron button or link when the rider can open the vehicleAdd onClick or tabIndex to the label: it has no focus ring, role for a control or target sizereview
DD-7mustUse SeverityLabel for a kind of disruption on a lineUse VehicleDotLabel's no signal for a feed problem across a line: that is SeverityLabel's "Data feed problems"review