Skip to the content
Perron
GitHub

Text

Stable
StorybookSpec

Text sets a piece of text in one of the typography roles and one of the text colours, on the element the caller's document needs.

When to use

Use Text to set words in one typography role and one text colour, on the element the document needs, such as a heading, a caption or a time.

Use insteadWhen
LinkThe words take the reader to another page or place
SectionA small heading in capitals names a group of content inside a panel
StatA key figure stands large with the words that say what it counts
DelayThe words say how late or early a vehicle runs, in the delay's colour
KbdThe text is a key of the keyboard, inside help text
TagA word or two on a pill marks a property of what it sits beside
On this page

Kongens Nytorv

Metro M1, M2 and M3.

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Variants and states

Rest
Body

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Display
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading lg
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading md
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading sm
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Body sm

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Caption
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Label
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Label sm
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Overline
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Badge
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Stat
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data xl
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data lg
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data sm
Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Neutral

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Brand

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Success

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Warning

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Danger

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Info

Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Body
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Display
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading lg
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading md
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Heading sm
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Body sm
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Caption
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Label
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Label sm
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Overline
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Badge
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Stat
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data xl
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data lg
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Data sm
  • Rest
    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.
Neutral
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Brand
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Success
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Warning
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Danger
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Info
  • Rest

    Signal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.

Props

NameTypeDefaultDescription
variant'body' | 'display' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-sm' | 'caption' | 'label' | 'label-sm' | 'overline' | 'badge' | 'stat' | 'data-xl' | 'data-lg' | 'data' | 'data-sm''body'The typography role, one per job, as Typography gives them: data roles for anything compared down a column, overline set in capitals. All sixteen roles, spelled as their tokens are, with 'body' first and the default: it is the role perron.css sets on the page body.
color'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info''neutral'The intent: what the colour means. neutral is main text; brand is emphasis on the hero page, never a link; the status intents say on time, warning, late or info, always beside words that say it too, such as "Late" or "+4 min": colour is never the only sign. All six intents, each with its color.text.* token, default 'neutral' (color.text.primary) rather than inheriting: every intent has a text token measured at 4.5:1, and text on an inverse or coloured fill is the fill's own component's text, not a Text.
emphasis'primary' | 'secondary' | 'tertiary''primary'How strongly neutral text stands out: primary for what people read first, secondary for supporting text, tertiary for hints and captions next to stronger text. Changes nothing with any other color. A prop of Text's own, for color.text.secondary and color.text.tertiary, which are no intent and so can't be color values; its values are the tokens' own names.
childrenReactNode—The text: a string, an element such as <strong> or <time>, or a list of both.
classNamestring—Joined after pn-Text on the root.
styleCSSProperties—Merged onto the root.
refRef<HTMLElement>—Reaches the root element, whichever element render makes it.
variant'body' | 'display' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-sm' | 'caption' | 'label' | 'label-sm' | 'overline' | 'badge' | 'stat' | 'data-xl' | 'data-lg' | 'data' | 'data-sm', default 'body'
The typography role, one per job, as Typography gives them: data roles for anything compared down a column, overline set in capitals. All sixteen roles, spelled as their tokens are, with 'body' first and the default: it is the role perron.css sets on the page body.
color'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info', default 'neutral'
The intent: what the colour means. neutral is main text; brand is emphasis on the hero page, never a link; the status intents say on time, warning, late or info, always beside words that say it too, such as "Late" or "+4 min": colour is never the only sign. All six intents, each with its color.text.* token, default 'neutral' (color.text.primary) rather than inheriting: every intent has a text token measured at 4.5:1, and text on an inverse or coloured fill is the fill's own component's text, not a Text.
emphasis'primary' | 'secondary' | 'tertiary', default 'primary'
How strongly neutral text stands out: primary for what people read first, secondary for supporting text, tertiary for hints and captions next to stronger text. Changes nothing with any other color. A prop of Text's own, for color.text.secondary and color.text.tertiary, which are no intent and so can't be color values; its values are the tokens' own names.
childrenReactNode, default —
The text: a string, an element such as <strong> or <time>, or a list of both.
classNamestring, default —
Joined after pn-Text on the root.
styleCSSProperties, default —
Merged onto the root.
refRef<HTMLElement>, default —
Reaches the root element, whichever element render makes it.

Use it

import { Text } from '@mylder/perron'

Ask your agent

search_docs({ query: "Text" })

Keyboard and ARIA

From the useRender reference. "From" says who does it: Base UI, or Perron.

KeyDoesFrom
NoneText is not interactive: it never takes focus or a key.none
ElementRoleAccessible name fromStates announced
rootThe element's own: paragraph for <p>, generic for <span>, heading for an h element from renderIts own text, read in place; a heading from render is named by its childrenNone

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 text itself is what both are told; a status color is never the only sign, so the caller's words say it (CR-8), and overline's capitals are styling over sentence-case source text, read as written.
  • Every landmark and named region has an accessible name: none here; Text makes no landmark or region.
  • Every default label can be overridden: none here; Text owns no strings.
  • Every shape the type accepts renders, in every variant: children is a ReactNode; the RichContent story gives a list of a string and a <time> element, and every other story a string.
  • A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; Text keeps no hidden copy and collapses nothing.
  • Native semantics first: <p> for sentences, <span> for the rest, and the caller's own element through render: <h2> for a heading, <time> for a time. No ARIA.
  • Focus moves in reading order and returns on close: none here; Text takes no focus and opens nothing.
  • Every target is at least size.target-min square: none here; Text is no target.
  • Loops stop when the system asks for less motion: none here; Text has no animation.

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.

RuleLevelDoDon'tChecked by
DD-1mustGive a heading role its heading element through render, at its level in the page's outline: render={<h2 />}.Set a heading's look on a <span>: a screen reader's list of headings never finds it.review
DD-2mustSay a status in words beside its colour: color='danger' on "+4 min late".Let red or green be the only sign, which fails 1.4.1 and every rider who can't tell them apart.review
DD-3mustKeep emphasis='tertiary' for hints and captions next to stronger text.Set a sentence people must read in tertiary: it misses 4.5:1 on purpose.review
DD-4shouldSet times, countdowns, counts and delays in a data role, so their tabular figures line up down a column.Set a time in body, where each digit has its own width and a column of times wobbles.review
DD-5mustWrite an overline's text in sentence case and let the role set the capitals.Type the capitals: a screen reader may spell them out letter by letter.review
DD-6mustKeep color='brand' for emphasis on the hero page.Use brand text for a link, or anything that looks like one.review
DD-7shouldLeave badge to line badges, the job its role was made for.Set other text in badge: its line height of 1 crowds a second line against the first.review
DD-8shouldRestyle through className, with the tokens.Reach for a raw size or colour in style, which leaves the theme and the scale behind.review