atom · stable · app, extension, site · since 2026-09
Text
Purpose
A run of text with a size and a tone: a caption, a count, a help line, a sentence that says a state. One element, a size from the scale, an ink from the tokens.
When to use, when not
Use it for the short text a screen is full of. Not for a paragraph of running text, which is Prose and takes a measure; not for a heading; not for a label above small capitals, which is Eyebrow.
Anatomy
- One element,
p,spanordiv, with the size, the tone, the weight and the face as modifiers.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
as? | 'p' | 'span' | 'div' | 'p' | The element: `p` for a sentence on its own line, `span` inside one, `div` for a block that holds more than text. |
size? | 'xs' | 'sm' | 'base' | 'lg' | 'base' | The type size, from the scale. |
tone? | 'default' | 'soft' | 'success' | 'warning' | 'error' | 'default' | The ink: `soft` for what supports, `success`, `warning` and `error` for a state the words already say. |
bold? | boolean | false | Bold, for a word that leads. |
mono? | boolean | false | The mono face, for a value: a selector, a code, an address. |
class? | string | '' | Layout classes only: a margin. |
children | Snippet |
States
Plain, soft and small, the three state tones, and inline with a bold word and a mono value.
inline
A span inside a sentence: a bold word and a value in the mono face.
Light
Le sélecteur footer .legal-links désigne trois éléments.
Dark
Le sélecteur footer .legal-links désigne trois éléments.
320 px, light
Le sélecteur footer .legal-links désigne trois éléments.
320 px, dark
Le sélecteur footer .legal-links désigne trois éléments.
216 px, light
Le sélecteur footer .legal-links désigne trois éléments.
Forced colours, captured
plain
A sentence at the base size in the ink.
Light
La page a été ajoutée à l'audit.
Dark
La page a été ajoutée à l'audit.
320 px, light
La page a été ajoutée à l'audit.
320 px, dark
La page a été ajoutée à l'audit.
216 px, light
La page a été ajoutée à l'audit.
Forced colours, captured
soft
The soft ink and the small size: a help line, a caption.
Light
Visible dans le rapport, jamais dans la déclaration.
Dark
Visible dans le rapport, jamais dans la déclaration.
320 px, light
Visible dans le rapport, jamais dans la déclaration.
320 px, dark
Visible dans le rapport, jamais dans la déclaration.
216 px, light
Visible dans le rapport, jamais dans la déclaration.
Forced colours, captured
tones
The three state inks, each with the words that carry the state.
Light
Conforme, 106 critères tranchés.
Attention, trois critères restent à relire.
Erreur, la capture a échoué.
Dark
Conforme, 106 critères tranchés.
Attention, trois critères restent à relire.
Erreur, la capture a échoué.
320 px, light
Conforme, 106 critères tranchés.
Attention, trois critères restent à relire.
Erreur, la capture a échoué.
320 px, dark
Conforme, 106 critères tranchés.
Attention, trois critères restent à relire.
Erreur, la capture a échoué.
216 px, light
Conforme, 106 critères tranchés.
Attention, trois critères restent à relire.
Erreur, la capture a échoué.
Forced colours, captured
Accessibility contract
- Role and name: none; text.
- Keyboard, focus: none.
- Live regions: none. A sentence that must be announced goes through LiveRegion, which can hold a Text.
- A tone never carries the meaning: “Erreur, la capture a échoué.” says it before the ink does.
Content rules
French. A sentence ends with a period; a caption or a count does not. A state tone starts with the word of the state when the sentence is short (“Attention, …”).
Do and don’t
- Do use
softfor what supports the main text, never for the main text. - Do use
monofor a value the reader may copy: a selector, an address. - Do not use a state tone to decorate; the ink says a state, and only when the words say it too.
Examples
<Text size="sm" tone="soft">Visible dans le rapport.</Text>
<p>Le sélecteur <Text as="span" mono size="sm">footer .legal-links</Text> désigne trois éléments.</p>Surfaces
- App: help lines, captions, counts.
- Extension: the panel’s hints and captions.
- Site: captions under the demos.
Related
Prose, Heading, Eyebrow.
Decisions
- 2026-09-26: no measure prop: a run of text that needs one is a paragraph of running text, which is Prose.
Criteria held by construction
- 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
A tone is an ink; the words carry the state, and the doc refuses a tone on a sentence that does not say it. - 10.4, Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ?
Sizes are from the scale in rem, so the text zooms with the browser's setting.
Tokens it reads
- Colour:
--rl-attention,--rl-c,--rl-ink,--rl-ink-soft,--rl-nc - Typography:
--rl-font-mono,--rl-weight-bold,--rl-text-base,--rl-text-lg,--rl-text-sm,--rl-text-xs,--rl-leading-body