organism · stable · app · since 2026-09
DangerZone
Purpose
The part of a settings page where the actions cannot be undone: a heading that says what is at stake, a sentence that says what is lost, and one destructive button per action, each asking first through ConfirmDialog.
When to use, when not
Use it at the foot of a settings page for deleting, resetting or transferring what cannot be restored. Not for an action that can be undone (a plain Button, perhaps a Toast with “Annuler”), not for a single delete button in a table row (a Button with its own ConfirmDialog).
Anatomy
- The frame, the strong structural line.
- The heading.
- The explanation.
- One destructive button per action, and its question, closed until pressed.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
title | string | The zone's heading, which says what is at stake: "Suppression du site". | |
level? | 2 | 3 | 2 | The heading level, from the page's outline. |
actions | DangerAction[] | The irreversible actions, each confirmed before it runs. | |
class? | string | '' | Layout classes only: a margin. |
children? | Snippet | The explanation: what the actions destroy, in a sentence or two. |
States
One action, several actions, and an action under way.
busy
The confirmed work under way: the button stays focusable and says it is busy.
Light
Suppression du site
Dark
Suppression du site
320 px, light
Suppression du site
320 px, dark
Suppression du site
216 px, light
Suppression du site
Forced colours, captured
several
Two actions of different reach, each with its own question; the page says what happened through its LiveRegion.
Light
Actions irréversibles
Ce qui se fait ici ne se défait pas.
Dark
Actions irréversibles
Ce qui se fait ici ne se défait pas.
320 px, light
Actions irréversibles
Ce qui se fait ici ne se défait pas.
320 px, dark
Actions irréversibles
Ce qui se fait ici ne se défait pas.
216 px, light
Actions irréversibles
Ce qui se fait ici ne se défait pas.
Forced colours, captured
single
The settings page's shape: one action, the sentence that says what is lost, the question before it runs.
Light
Suppression du site
Irréversible. Tous les audits, toutes les pages et tous les résultats de ce site seront perdus.
Dark
Suppression du site
Irréversible. Tous les audits, toutes les pages et tous les résultats de ce site seront perdus.
320 px, light
Suppression du site
Irréversible. Tous les audits, toutes les pages et tous les résultats de ce site seront perdus.
320 px, dark
Suppression du site
Irréversible. Tous les audits, toutes les pages et tous les résultats de ce site seront perdus.
216 px, light
Suppression du site
Irréversible. Tous les audits, toutes les pages et tous les résultats de ce site seront perdus.
Forced colours, captured
Accessibility contract
- Role and name: a
sectionnamed by its heading througharia-labelledby; each action a button named by its words; each question adialognamed by its heading. - Keyboard, focus: Tab reaches each button; Enter opens its question with the focus on “Annuler”; Escape closes it and the focus returns to the button.
- Live regions: none of the zone’s. After the work, the page says what happened, through its LiveRegion or its Toast, or by leaving the page.
Content rules
French. The heading names what is at stake (“Suppression du site”). The explanation starts with “Irréversible.” when the actions are, and says what is lost. The button label is a verb and its object (“Supprimer le site”); the question repeats it with “définitivement” and a question mark; the consequence ends with “Cette action est irréversible.”
Do and don’t
- Do put the zone last on the page, after everything that can be changed and changed back.
- Do let
onconfirmdo the work the page owns: submit its form, call its API. - Do not tint the zone with a status ink; the words carry the warning.
- Do not write a glyph in a button’s words; the verb says it.
Examples
<form method="POST" action="?/deleteProject" use:enhance bind:this={deletion}></form>
<DangerZone
title="Suppression du site"
actions={[{ label: 'Supprimer le site', confirmTitle: 'Supprimer définitivement ce site ?', consequence: 'Tous ses audits seront perdus. Cette action est irréversible.', onconfirm: () => deletion?.requestSubmit() }]}
>
<p>Irréversible. Tous les audits de ce site seront perdus.</p>
</DangerZone>Surfaces
- App: a site’s settings page.
Related
ConfirmDialog, Button, Dialog.
Decisions
- 2026-09-27: the frame is the strong line and not the non-conformity red: a status ink used as an accent would stop meaning a status.
- 2026-09-27: the page keeps its form and the zone calls back on confirm: a form inside the component could not take the page’s
use:enhance.
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 ?
The warning is in the words, the heading, the sentence and the verb on each button; the frame is the structural line, not the red of non-conformity, which is left to the destructive button. - 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
The zone is a section named by a heading at the level the page gives, so a reader jumping by headings finds it and knows what is at stake before reaching a button. - 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
Every action asks through ConfirmDialog, a native modal dialog named by its question with the cancel button focused, never window.confirm(), which a browser lets the user silence. - 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
Each button is named by its verb and what it acts on ('Supprimer le site'), and the dialog's confirm button repeats that verb, never 'OK'.
Tokens it reads
- Colour:
--rl-ink-soft,--rl-line-strong - Typography:
--rl-measure-prose - Spacing:
--rl-space-2,--rl-space-3,--rl-space-4,--rl-space-6 - Layout:
--rl-radius,--rl-border-strong