A small filled label that names one Copenhagen line, a metro, S-tog, bus or regional train, in the operator's own line colour.
When to use
Use LineBadge to name one line in its operator's colour, beside the words that name it, in a row, a list or a panel's header.
| Use instead | When |
|---|---|
| StationIcon | The mark stands for a stop or station, in the colour of the line that serves it |
| VehicleDot | The mark stands for one vehicle, in its line's colour, with how fresh its data is |
| Tag | The words mark a property of a departure or vehicle, such as "Night bus", not its line |
| HighlightChip | The rider puts the line in focus on the map and turns it off again |
On this page
Kongens Nytorv
Metro M1, M2 and M3.
M2
Sizes
M2
Mediumsize.badge · 22 pxM2
Largesize.badge-lg · 34 pxProps
| Name | Type | Default | Description |
|---|---|---|---|
line* | 'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional' | — | The line whose colours the badge takes: a metro line (m1 to m4), an S-tog line (a to h), any bus (bus), or any regional or Øresund train (regional). Required, with no default; set on the root as data-line. |
size | 'medium' | 'large' | 'medium' | medium is the badge in rows and lists, size.badge tall; large is the badge in a panel's header, size.badge-lg tall. Both sizes set the label in typography.badge. |
children* | ReactNode | — | The line's short name as riders know it: "M1", "A", "5C", "RE". Required: the badge never derives it from line, which holds no bus number. |
line (required)'m1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional', default —- The line whose colours the badge takes: a metro line (
m1tom4), an S-tog line (atoh), any bus (bus), or any regional or Øresund train (regional). Required, with no default; set on the root asdata-line. size'medium' | 'large', default'medium'mediumis the badge in rows and lists,size.badgetall;largeis the badge in a panel's header,size.badge-lgtall. Both sizes set the label intypography.badge.children (required)ReactNode, default —- The line's short name as riders know it: "M1", "A", "5C", "RE". Required: the badge never derives it from
line, which holds no bus number.
Use it
import { LineBadge } from '@mylder/perron'Ask your agent
search_docs({ query: "LineBadge" })Keyboard and ARIA
No keys: the badge is not focusable and does nothing when pressed (CR-2).
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | none: a <span>, read as its text | Its text, the caller's children | none |
The label alone is what a screen reader hears, with no owned word for the mode ("Bus", "Metro") and no aria-label: the label is the line's name as riders say it, the colour only repeats it, and the row the badge sits in names the rest. A <span> without a role can't carry aria-label reliably either.
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 colour names the line, and the label, which a screen reader reads, names it too, for every
linevalue;childrenis required. - Every landmark and named region has an accessible name: none here; the badge is inline text.
- Every default label can be overridden: no owned strings, so no
*Labelprops. - Every shape the type accepts renders, in every variant:
childrenrenders as a string, an element and a list alike, inside the fixed-height box, on one line. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; the badge has no motion. - Native semantics first: a plain
<span>, no ARIA. - Focus moves in reading order and returns on close: never focused; it has no tab stop.
- Every target is at least
size.target-minsquare: no target; a pressable line is the caller's button or link around the badge, which meets the minimum itself. - Loops stop when the system asks for less motion: none here; the badge has no motion.
Owned strings
No owned strings: the label is the caller's children, and the badge announces nothing else.
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 | Name the line in words near the badge, such as "M1 towards Vanløse", because five official pairs (M1, M4, A, B, C) miss 4.5:1 and stay so | Rely on the badge's label alone where the line matters, such as the only mention of a line in a disruption | review |
| DD-2 | should | Pass the name riders know as children: "5C", "A", "RE" | Pass a sentence or a mode word ("Bus 5C"); the colour already says the mode, and the badge is sized for a short name | review |
| DD-3 | must | Use a line colour as a fill only in a LineBadge, and as a dot, ring, rail or swatch elsewhere, as Semantic colours says | Fill another shape, such as a chip or a panel header, with a line colour | review |
| DD-4 | must | Wrap the badge in a Perron button or link when the rider can open the line | Add onClick or tabIndex to the badge; it has no focus ring, role or target size | review |
| DD-5 | should | Keep brand buttons out of rows of line badges | Put a brand button beside bus badges, where its yellow fill and ink label read as one more bus | review |
| DD-6 | should | Choose large only for the one badge that heads a panel | Mix sizes in one row or list | review |