A small round marker that stands for a stop or station beside its name, in the colour of the line that serves it, as in a detail panel's header and on each stop of a stop timeline.
When to use
Use StationIcon to mark a stop or a station beside its name, in the colour of the line that serves it, such as in a detail panel's header.
| Use instead | When |
|---|---|
| LineBadge | The mark names a line |
| StopTimeline | A vehicle's trip shows its stops in order, on a rail in its line's colour |
| VehicleDot | The mark stands for a vehicle and how fresh its data is |
On this page
Kongens Nytorv
Metro M1, M2 and M3.
Nørreport
Variants and states
| Rest | |
|---|---|
| Outlined | Nørreport |
| Filled | Nørreport |
- RestNørreport
Sizes
Nørreport
MediumNørreport
SmallNørreport
LargeProps
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'outlined' | 'filled' | 'outlined' | outlined is a ring around the surface colour, for any stop; filled is a solid dot in the line's colour, for the one stop that matters most, such as the vehicle's next stop. |
line | 'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional' | — | The line or mode whose colour the marker takes: a metro or S-tog line by its id, or bus or regional for every line of that mode. Left out, the marker is neutral, for a station several lines serve. |
size | 'small' | 'medium' | 'large' | 'medium' | The marker's diameter: small beside caption and label text, as on a stop timeline; medium inside controls and rows; large beside a panel title. The three sizes are the three icon sizes, so the marker matches an icon beside the same text. |
className | string | — | Merged after pn-StationIcon on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLSpanElement> | — | Reaches the root |
variant'outlined' | 'filled', default'outlined'outlinedis a ring around the surface colour, for any stop;filledis a solid dot in the line's colour, for the one stop that matters most, such as the vehicle's next stop.line'm1' | 'm2' | 'm3' | 'm4' | 'a' | 'b' | 'c' | 'e' | 'f' | 'h' | 'bus' | 'regional', default —- The line or mode whose colour the marker takes: a metro or S-tog line by its id, or
busorregionalfor every line of that mode. Left out, the marker is neutral, for a station several lines serve. size'small' | 'medium' | 'large', default'medium'- The marker's diameter:
smallbeside caption and label text, as on a stop timeline;mediuminside controls and rows;largebeside a panel title. The three sizes are the three icon sizes, so the marker matches an icon beside the same text. classNamestring, default —- Merged after
pn-StationIconon the root styleCSSProperties, default —- Reaches the root
refRef<HTMLSpanElement>, default —- Reaches the root
Use it
import { StationIcon } from '@mylder/perron'Ask your agent
search_docs({ query: "StationIcon" })Keyboard and ARIA
No Base UI part, so nothing from Base UI here: the marker is decorative, never focusable, and hidden from assistive technology.
| Key | Does | From |
|---|---|---|
| None | The marker takes no focus and no keys; Tab passes it by | Perron |
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | None: aria-hidden="true", hidden | None: the stop's name, and the line's, are the caller's text beside it | None |
StationIcon is always decorative: Perron sets aria-hidden="true" after the rest props so it wins over them (a render element's own props merge last, as CR-3 says), with no accessible name and no label prop, as an icon next to text is (Icons). It always sits beside the stop's name, and the line is named in words nearby, so it adds nothing for the ear.
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 marker tells the eye the line's colour and, filled, which stop matters; the caller's text beside it names the stop and the line, and a filled stop's meaning (such as "Next stop"), as Do and don't says
- Every landmark and named region has an accessible name: none here, the marker is not a region
- Every default label can be overridden: none here, the marker owns no label
- Every shape the type accepts renders, in every variant: every
linevalue, and none, in both variants and all three sizes, shown by theLinesstory and the six variant stories - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here, nothing animates or collapses - Native semantics first: a plain
<span>witharia-hidden="true", no role - Focus moves in reading order and returns on close: the marker is never focused, so focus passes it in reading order
- Every target is at least
size.target-minsquare: none here, the marker is not a target; a caller that makes a stop pressable makes its whole row the target - Loops stop when the system asks for less motion: none here, nothing moves
Owned strings
No owned strings: the marker shows and announces no words, and the stop's and line's names come from the caller beside it.
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 the marker beside the stop's name, with the line named in words nearby, because the marker is hidden from screen readers | Use it alone, or as the only sign of which line serves a stop: colour is never alone (Accessibility) | review |
| DD-2 | must | Leave line out for a station several lines serve, so the marker is neutral | Pick one of several lines' colours for a shared station, which tells the eye only one line stops there | review |
| DD-3 | must | Use filled for the one stop that matters most in a list, such as the next stop, and say why in words beside it | Fill several stops in one list, or use filled to mean a state the words don't say | review |
| DD-4 | must | Use a LineBadge to name a line | Use a StationIcon as a line's badge or swatch in a row of badges, where it reads as a stop | review |
| DD-5 | 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 the ring's weight against its icon-sized neighbours | review |
| DD-6 | must | Make the whole row pressable when a stop opens something, at least size.target-min tall | Make the marker itself a button or link: it is too small a target and has no name | review |