molecule · stable · site, app · since 2026-08
Alert
Purpose
A message of information, success, warning or failure. It exists for three reasons, two of which are accessibility traps a hand-written box almost always misses: the word before the colour, the right ARIA role, and a decided live.
When to use, when not
Use it for a message the page shows about an action or a state: a form error at the top of the form, a confirmation after a save, a warning before a destructive step. Do not use it for a transient toast, for content that is merely framed (that is Callout), or for a field’s own error (Field carries it).
Anatomy
- The tone’s drawing from the icon set,
aria-hidden. - The tone’s word, visible, or visually hidden before a free title.
- The message.
- A line around, in the tone’s ink, never a fill.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
tone? | Tone | 'info' | What the message is: the word, the drawing and the ink follow. |
title? | string | An optional title. The tone's word stays in the accessible name in every case. | |
live? | boolean | false | `true` when the message appears after load, in response to an action. False by default: a message already present has nothing to announce. |
class? | string | '' | Layout classes only: margins, never appearance. |
children | Snippet |
States
Four tones, with or without a title, live or not.
error
Light
Erreur
Dark
Erreur
320 px, light
Erreur
320 px, dark
Erreur
216 px, light
Erreur
Forced colours, captured
info
Light
Information
Dark
Information
320 px, light
Information
320 px, dark
Information
216 px, light
Information
Forced colours, captured
liveError
Appeared after an action: role alert, read at once.
Light
Erreur
Dark
Erreur
320 px, light
Erreur
320 px, dark
Erreur
216 px, light
Erreur
Forced colours, captured
liveSuccess
Appeared after an action: role status, read at the next pause.
Light
Fait
Dark
Fait
320 px, light
Fait
320 px, dark
Fait
216 px, light
Fait
Forced colours, captured
success
Light
Fait
Dark
Fait
320 px, light
Fait
320 px, dark
Fait
216 px, light
Fait
Forced colours, captured
titled
The free title shows; the tone word stays in the accessible name.
Light
Fait :Audit enregistré
Dark
Fait :Audit enregistré
320 px, light
Fait :Audit enregistré
320 px, dark
Fait :Audit enregistré
216 px, light
Fait :Audit enregistré
Forced colours, captured
warning
Light
Attention
Dark
Attention
320 px, light
Attention
320 px, dark
Attention
216 px, light
Attention
Forced colours, captured
Accessibility contract
- Role and name: no role when the message is present at load (it is read in the flow). With
live,alertfor an error andstatusfor everything else. The tone’s word is always in the accessible name. - Keyboard, focus: none. A live message never moves the focus.
- Live regions: a message that appears after an action is announced; a message present at load is not. That is what
livedecides, and it must be decided.
Content rules
French. The message says what happened and, for an error, what to do. The tone’s word is the standard’s (Erreur, Attention, Fait, Information); a title, when there is one, is specific.
Do and don’t
- Do set
liveon a message that appears in response to an action. - Do not set
liveon a message rendered with the page: it would be announced twice. - Do not use the warning tone for a decoration; the tone is the meaning.
Examples
<Alert tone="error" live>Le mot de passe ne correspond pas.</Alert>
<Alert tone="success" title="Audit enregistré">Les 106 critères sont à jour.</Alert>Surfaces
- App: the auth pages, the settings, the admin lists, the audit page.
- Site: the beta page and the gallery.
Related
Callout, Icon.
Decisions
- 2026-08:
alertonly for the error tone; a success announced as an alert harasses. - 2026-09-24: props
tone(info,success,warning,error) andtitle; the drawing comes from the icon set, and the warning tone takes the attention ink the tokens define for it, where it used to borrow the plain ink.
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 ?
Every tone carries a readable word (Erreur, Attention, Fait, Information) and a drawing; a red box with no word says nothing to whoever does not see the hue. - 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
The ARIA role is chosen from the tone: alert interrupts, status waits for a pause, and a message present at load announces nothing.
Tokens it reads
- Colour:
--rl-attention,--rl-c,--rl-ink-soft,--rl-nc - Typography:
--rl-weight-bold,--rl-text-sm - Spacing:
--rl-space-1,--rl-space-3,--rl-space-4 - Layout:
--rl-radius,--rl-border