Brand · Perron

Kongens Nytorv

Metro M1, M2 and M3.

Mylder

Variants and states

	Rest
Full	Mylder
Mark	Mylder

Rest
Mylder

Props

Name	Type	Default	Description
`variant`	`'full' \| 'mark'`	`'full'`	`full` sets the mark beside the wordmark, as the brand appears by default; `mark` shows the mark alone, for where space is tight, with the brand name read to screen readers.
`brandNameLabel`	`string`	The locale's	Overrides "Mylder", the brand name seen in the wordmark, shown lowercase, with `variant='full'`, and heard alone with `variant='mark'`.
`className`	`string`	—	Merged after `pn-Brand` on the root
`style`	`CSSProperties`	—	Reaches the root
`ref`	`Ref<HTMLSpanElement>`	—	Reaches the root

variant'full' | 'mark', default 'full': full sets the mark beside the wordmark, as the brand appears by default; mark shows the mark alone, for where space is tight, with the brand name read to screen readers.
brandNameLabelstring, default The locale's: Overrides "Mylder", the brand name seen in the wordmark, shown lowercase, with variant='full', and heard alone with variant='mark'.
classNamestring, default —: Merged after pn-Brand on the root
styleCSSProperties, default —: Reaches the root
refRef<HTMLSpanElement>, default —: Reaches the root

Use it

import { Brand } from '@mylder/perron'

Ask your agent

search_docs({ query: "Brand" })

Keyboard and ARIA

No Base UI part, so nothing from Base UI here. Brand takes no focus of its own; a caller that renders it as a link makes it one stop in the tab order.

Key	Does	From
None	The lockup takes no focus and no keys; Tab passes it by	Perron
Enter	Rendered as a link (`render={<a href="/" />}`), follows it; Tab focuses it and `perron.css` draws the ring	The browser, through the caller's `<a href>`

Element	Role	Accessible name from	States announced
`root`	None: a `<span>`; `link` when the caller renders an `<a href>`	Its text: the `wordmark`, or with `variant='mark'` the `label`, both the `brandName` owned string ("Mylder")	None
`mark`	None: `aria-hidden="true"`, hidden	None: the brand name beside it, seen or hidden, says it	None
`wordmark`	None: text	Its text, "Mylder", shown lowercase	None
`label`	None: text, visually hidden	Its text, "Mylder"	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 eye reads the brand from the mark and the wordmark; the ear hears the brand name, from the wordmark with variant='full' and from the VisuallyHidden label with variant='mark', so neither variant is silent
Every landmark and named region has an accessible name: none here, the lockup is not a region; the top bar or kiosk bar that holds it names its own
Every default label can be overridden: brandNameLabel overrides "Mylder", in the wordmark and in the hidden label alike
Every shape the type accepts renders, in every variant: both variant values, each with and without brandNameLabel, and each as a <span> and as a link through render: the Variants story as a <span>, Links as a link, and BrandNameLabel with brandNameLabel in both, its link named by the override
A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here, nothing animates or collapses; the aria-hidden mark is a picture, not a copy
Native semantics first: a plain <span> with no role; the caller's <a href> through render for a link, never role="link" or role="img"
Focus moves in reading order and returns on close: nothing takes focus but a caller's link, which sits in the tab order where it sits in the page
Every target is at least size.target-min square: rendered as a link, the lockup is at least size.target-min tall and wider than tall in both variants (the mark alone, 27 px)
Loops stop when the system asks for less motion: none here, nothing moves

Owned strings

The brand name is a word the component shows and announces that the caller doesn't give, so it is an owned string: expectOwnedStrings fails a text run that is neither in the dictionary nor the caller's.

Key	English	Override	Seen or heard where
`brandName`	`Mylder`	`brandNameLabel`	The `wordmark`, shown lowercase as "mylder" with `variant='full'`; the `VisuallyHidden` label, read only, with `variant='mark'`

The brand name is a new owned-string key, brandName, with "Mylder" in all four locales (a name, not translated), shown lowercase through text-transform: lowercase on the wordmark rather than written lowercase in the dictionary. The logo file's title and the docs write the name "Mylder", so screen readers meet a capitalised name, the wordmark still reads "mylder" as Logos asks, and a brandNameLabel override is lowercased the same way.

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	Use Brand wherever the Mylder brand appears in an interface, so the mark follows the theme	Put `mylder-mark.svg` in an `<img>` on a themed ground: a file can't follow the theme, so the ring disappears in dark	review
DD-2	must	Keep `variant='full'`, and switch to `variant='mark'` only where space is tight	Show the wordmark alone, or set "mylder" in text beside an icon: the lockup is the mark and the wordmark together	review
DD-3	must	Hide the whole Brand, or pick `variant='mark'`, at the screen's own breakpoint, such as `breakpoint.compact-phone`	Hide parts of it with `className`, which can leave a mark that no screen reader hears or a wordmark without its mark	review
DD-4	must	Render it as a link to the start screen with `render={<a href="/" />}`, so the name and the link are one stop in the tab order	Wrap it in a `<button>` with its own `aria-label`, or give the link a second name: the brand name is already its accessible name	review
DD-5	must	Keep at least the ring's width of clear space around it, as Logos asks	Resize, recolour or restyle the mark with `className`, which breaks its drawn size and turns its colours, which are data states, into others	review