Tag · Perron

A short word or two on a pill that marks a property of what it sits beside, such as "Night bus", "Replacement bus" or "Cancelled" on a departure or a vehicle, set in capitals in one of the intents' colours.

When to use

Use Tag to mark a property of what it sits beside in a word or two, such as "Night bus" or "Cancelled" on a departure or a vehicle.

Use instead	When
SeverityLabel	The words name a kind of disruption on a line, such as "Delays"
LineBadge	The label names a line, in the operator's colour
Count	The pill holds a number, such as how many there are
Delay	The figure says how late or early a vehicle runs, such as "+3 min"
FilterChip	People turn the pill on and off, as a filter

On this page

Kongens Nytorv

Metro M1, M2 and M3.

Night bus

Variants and states

	Rest
Filled · neutral	Night bus
Filled · success	Night bus
Filled · warning	Night bus
Filled · danger	Night bus
Filled · info	Night bus
Dashed · neutral	Night bus
Dashed · success	Night bus
Dashed · warning	Night bus
Dashed · danger	Night bus
Dashed · info	Night bus

Filled · neutral

Rest
Night bus

Filled · success

Rest
Night bus

Filled · warning

Rest
Night bus

Filled · danger

Rest
Night bus

Filled · info

Rest
Night bus

Dashed · neutral

Rest
Night bus

Dashed · success

Rest
Night bus

Dashed · warning

Rest
Night bus

Dashed · danger

Rest
Night bus

Dashed · info

Rest
Night bus

Props

Name	Type	Default	Description
`variant`	`'filled' \| 'dashed'`	`'filled'`	How sure the tag is: `filled` lays the intent's tinted surface under the words, for a property that holds; `dashed` has no fill and a dashed edge, for something announced but not yet confirmed by live data. Set on the root as `data-variant`.
`color`	`'neutral' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	The intent: what the colour means. `neutral` for a plain property, such as "Night bus"; the status intents for good news, a warning, a problem or information, always in words that say it too, such as "Cancelled": colour is never the only sign. Set on the root as `data-color`.
`children`*	`ReactNode`	(required)	The words: one or two, and on a `dashed` tag a word more that says it is not confirmed, such as "Replacement bus planned"; written in sentence case, which the tag sets in capitals. A string, an element such as `<time>`, or a list of both.
`className`	`string`	—	Joined after `pn-Tag` on the root
`style`	`CSSProperties`	—	Reaches the root
`ref`	`Ref<HTMLSpanElement>`	—	Reaches the root element

variant'filled' | 'dashed', default 'filled': How sure the tag is: filled lays the intent's tinted surface under the words, for a property that holds; dashed has no fill and a dashed edge, for something announced but not yet confirmed by live data. Set on the root as data-variant.
color'neutral' | 'success' | 'warning' | 'danger' | 'info', default 'neutral': The intent: what the colour means. neutral for a plain property, such as "Night bus"; the status intents for good news, a warning, a problem or information, always in words that say it too, such as "Cancelled": colour is never the only sign. Set on the root as data-color.
children (required)ReactNode, default (required): The words: one or two, and on a dashed tag a word more that says it is not confirmed, such as "Replacement bus planned"; written in sentence case, which the tag sets in capitals. A string, an element such as <time>, or a list of both.
classNamestring, default —: Joined after pn-Tag on the root
styleCSSProperties, default —: Reaches the root
refRef<HTMLSpanElement>, default —: Reaches the root element

Use it

import { Tag } from '@mylder/perron'

Ask your agent

search_docs({ query: "Tag" })

Keyboard and ARIA

Tag is text: it takes no focus, and no key does anything. A caller who makes it a link or button through render brings that element's own keys and must give it a target of size.target-min, which a tag is not.

Key	Does	From
none	Tag is not focusable or operable	Perron

Element	Role	Accessible name from	States announced
`root`	none: a generic `<span>`	Not named; its words are read in place, as part of the row or card it marks	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: the caller's words say what the tag marks, in every color and variant; the colour and the dashed edge only repeat it, so a dashed tag's words say it is not confirmed, such as "Cancellation expected" (CR-5). The capitals are text-transform over sentence-case source text, so a screen reader reads the words as written, not letter by letter.
Every landmark and named region has an accessible name: none here; Tag is inline text.
Every default label can be overridden: none here; Tag owns no strings.
Every shape the type accepts renders, in every variant: children as a string, an element such as <time>, or a list of both, each inside the one root; every variant and color has its story.
A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; Tag does not animate.
Native semantics first: a <span> with no role and no ARIA.
Focus moves in reading order and returns on close: Tag takes no focus.
Every target is at least size.target-min square: no target; Tag is not pressed.
Loops stop when the system asks for less motion: none here; Tag has no motion.

Owned strings

No owned strings: every word comes from the caller, as children.

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	should	Mark a property of a departure, vehicle or line with one or two words: "Night bus", "Replacement bus".	Put a sentence in a tag: say what is happening beside it, in plain sentences, as content design asks.	review
DD-2	must	Write the words in sentence case and let the tag set the capitals.	Type the capitals: a screen reader may spell them out letter by letter.	review
DD-3	must	Say a status in the words: `color='danger'` on "Cancelled".	Let red or green be the only sign, which fails 1.4.1 and every rider who can't tell them apart.	review
DD-4	must	Use `dashed` for something announced but not yet confirmed by live data, and say so in the words where it matters: "Cancellation expected".	Use `dashed` as a quieter look for a property that holds: the dashed edge says "not confirmed", and the brand never claims more than it knows.	review
DD-5	should	Name a kind of disruption with SeverityLabel, a line with LineBadge, and a number with Count.	Spell out "Delays", a line's name or a count in a tag: each has its own component, with its own words, colours and figures.	review
DD-6	must	Use FilterChip for a filter people turn on and off.	Make a tag a control through `render`: it is smaller than `size.target-min` and has no hover, pressed or selected state.	review
DD-7	should	Let a row that holds a tag beside other content wrap, with `flex-wrap: wrap`, or let its other content give way.	Set a tag in a row that can't wrap: its narrowest width is its longest word, so a long word pushes it past the row's edge.	review