VehicleDot · Perron

One vehicle drawn as a dot in its line's colour, its shape saying how fresh the vehicle's data is, one of the five states on Data states, for rows, lists and legends beside the map.

When to use

Use VehicleDot to draw one vehicle's data state as a dot in its line's colour, beside words that say the state, in a row, a list or a legend.

Use instead	When
VehicleDotLabel	The state's word goes beside the dot, as it must wherever nothing else on the screen writes it
VehicleDotLegend	The dots need a key: all five states together
StationIcon	The marker stands for a stop or station
LineBadge	The label names the line

On this page

Kongens Nytorv

Metro M1, M2 and M3.

Live

Variants and states

	Rest
Live	Live
Ageing	Ageing
Estimated	Estimated
Timetable only	Timetable only
No signal	No signal

Live

Rest
Live

Ageing

Rest
Ageing

Estimated

Rest
Estimated

Timetable only

Rest
Timetable only

No signal

Rest
No signal

Sizes

Live

Medium

Live

Small

Live

Large

Props

Name	Type	Default	Description
`variant`	`'live' \| 'ageing' \| 'estimated' \| 'timetable-only' \| 'no-signal'`	`'live'`	How fresh the vehicle's data is: a solid dot, a fainter dot, a ring, a dashed ring, or a grey dot cut by a slash, as Data states names them. Set on the root as `data-variant`.
`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`. Left out, with no default, the root sets no `data-line` and the dot draws in the colour of the text around it, for a dot that stands for a state across many lines.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	The glyph box, at the icon size for where it sits: `small` beside caption and label text; `medium` inside controls and rows; `large` beside a panel title. Set on the root as `data-size`.
`liveLabel`	`string`	The locale's	Overrides "Live", heard as the dot's name when `variant='live'`
`ageingLabel`	`string`	The locale's	Overrides "Ageing", heard as the dot's name when `variant='ageing'`
`estimatedLabel`	`string`	The locale's	Overrides "Estimated", heard as the dot's name when `variant='estimated'`
`timetableOnlyLabel`	`string`	The locale's	Overrides "Timetable only", heard as the dot's name when `variant='timetable-only'`
`noSignalLabel`	`string`	The locale's	Overrides "No signal", heard as the dot's name when `variant='no-signal'`
`className`	`string`	—	Merged after `pn-VehicleDot` on the root
`style`	`CSSProperties`	—	Reaches the root
`ref`	`Ref<HTMLSpanElement>`	—	Reaches the root

variant'live' | 'ageing' | 'estimated' | 'timetable-only' | 'no-signal', default 'live': How fresh the vehicle's data is: a solid dot, a fainter dot, a ring, a dashed ring, or a grey dot cut by a slash, as Data states names them. Set on the root as data-variant.
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. Left out, with no default, the root sets no data-line and the dot draws in the colour of the text around it, for a dot that stands for a state across many lines.
size'small' | 'medium' | 'large', default 'medium': The glyph box, at the icon size for where it sits: small beside caption and label text; medium inside controls and rows; large beside a panel title. Set on the root as data-size.
liveLabelstring, default The locale's: Overrides "Live", heard as the dot's name when variant='live'
ageingLabelstring, default The locale's: Overrides "Ageing", heard as the dot's name when variant='ageing'
estimatedLabelstring, default The locale's: Overrides "Estimated", heard as the dot's name when variant='estimated'
timetableOnlyLabelstring, default The locale's: Overrides "Timetable only", heard as the dot's name when variant='timetable-only'
noSignalLabelstring, default The locale's: Overrides "No signal", heard as the dot's name when variant='no-signal'
classNamestring, default —: Merged after pn-VehicleDot on the root
styleCSSProperties, default —: Reaches the root
refRef<HTMLSpanElement>, default —: Reaches the root

Use it

import { VehicleDot } from '@mylder/perron'

Ask your agent

search_docs({ query: "VehicleDot" })

Keyboard and ARIA

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

Key	Does	From
`Tab`	Passes the dot by to the next focusable element: it has no tab stop (CR-2)	Perron

Element	Role	Accessible name from	States announced
`root`	`img`	`aria-label`, the owned string for its `variant` (`live`, `ageing`, `estimated`, `timetableOnly`, `noSignal`), or the caller's `*Label`	none
`glyph`	hidden, `aria-hidden="true"`	none: the root names the dot, and the `<svg>` adds nothing	none
`dot`	none	none: inside the hidden `glyph`	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: each of the five shapes is named by its state's word on the root; the line colour is not named, because the caller names the line in words nearby, as Semantic colours asks.
Every landmark and named region has an accessible name: none here; the dot is inline and 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 on every line, with no line, and at every size, in the Lines, NoLine and Sizes stories, and in forced colours in the ForcedColours story's play test; VehicleDot 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 glyph is aria-hidden because the root names it, not for animation.
Native semantics first: a <span> with role="img" and aria-label, the role for a named graphic; no native element names an inline drawing without one.
Focus moves in reading order and returns on close: the dot 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 dot, which meets the minimum itself.
Loops stop when the system asks for less motion: none here; the report and selection pulses belong to the map canvas.

Owned strings

Every word VehicleDot announces is its own, and it shows none. All five keys exist in packages/perron/src/locale/en.ts, held to the table in Content design; VehicleDot adds none.

Key	English	Override	Seen or heard where
`live`	Live	`liveLabel`	Heard: the root's `aria-label` when `variant='live'`
`ageing`	Ageing	`ageingLabel`	Heard: the root's `aria-label` when `variant='ageing'`
`estimated`	Estimated	`estimatedLabel`	Heard: the root's `aria-label` when `variant='estimated'`
`timetableOnly`	Timetable only	`timetableOnlyLabel`	Heard: the root's `aria-label` when `variant='timetable-only'`
`noSignal`	No signal	`noSignalLabel`	Heard: the root's `aria-label` when `variant='no-signal'`

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	Write the state in words next to the dot, or use VehicleDotLabel, which will	Show a dot alone in a list and trust its shape to carry the state: a state is always written in words beside it	review
DD-2	should	Pass `aria-hidden` when the state's word is already beside the dot	Let a screen reader hear "Live" twice, once from the dot and once from the text	review
DD-3	must	Name the line in words nearby, such as in a LineBadge	Let the dot's colour be the only sign of the line: several line colours miss 3:1 on the light surfaces	review
DD-4	should	Leave `line` out for a dot that stands for a state across many lines, such as a count of live vehicles	Leave `line` out of one vehicle's dot: it would lose its line's colour, which the map and the rows share	review
DD-5	must	Work out the state from the report's age with the app's thresholds, by default `vehicle-dot.live-threshold` and `vehicle-dot.ageing-threshold`	Pass `live` for a vehicle whose last report is minutes old: the dot would claim more than the data knows	review
DD-6	must	Keep the ring, the dashed ring, the cut dot and `color.data-state.no-signal` for a vehicle's data state	Draw a ring, a dashed ring or a slashed dot to mean anything else, such as a stop, an option or a disabled control	review
DD-7	should	Pick the `size` that matches the text beside it: `small` for captions, `medium` for labels, `large` for panel titles	Resize it with `className` or a raw width, which breaks its stroke widths against its icon-sized neighbours	review
DD-8	should	Draw vehicles on the map canvas with the map's own dot sizes and halo	Render a VehicleDot per vehicle on the map: it is for rows, lists and legends	review
DD-9	must	Wrap the dot in a Perron button or link when the rider can open the vehicle	Add `onClick` or `tabIndex` to the dot: it has no focus ring, role for a control or target size	review