molecule · stable · since 2026-09
ConfirmDialog
Purpose
A yes-or-no question before an action, composed from Dialog. The app asks eight of them through window.confirm(), which no design reaches, which some browsers let the user silence for a whole site, and whose buttons say “OK” whatever the question. Here the question is the title, the consequence is the body, the button says what it does, and the initial focus is on the least risky answer.
When to use, when not
Use it before an action the user cannot undo, or would regret: deleting, publishing, closing an audit. Do not use it for an action that can be undone in one step (offer the undo instead), nor as a generic “are you sure”, which trains the user to press Enter.
Anatomy
- The question, as the dialog’s heading.
- The consequence, as the body: what the action does and what it does not undo.
- The cancel button, secondary, first and focused.
- The confirm button, primary or destructive, with the verb of the action.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
open? | boolean | undefined | Shown or not; absent reads as closed. Bindable, set back to false when the dialog closes by any means. | |
title | string | The question, as the heading. | |
confirmLabel | string | The label of the button that does it: a verb that says the effect ("Retirer la page"), never "OK". | |
cancelLabel? | string | 'Annuler' | The label of the button that does not. |
destructive? | boolean | false | The action damages something: the confirm button takes the destructive variant. |
onconfirm? | () => void | Called when the user confirmed. | |
oncancel? | () => void | Called when the user did not: the cancel button, the close button or Escape. | |
children | Snippet | The consequence, as the body: what the action does, what it does not undo. |
States
Plain, and destructive.
destructive
The destructive variant: the red of non-conformity, outlined until hovered, on the button that damages.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
plain
The primary variant for an action that can be undone or redone.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Accessibility contract
- Role and name: Dialog’s, named by the question.
- Keyboard, focus: the initial focus is on the cancel button, so Enter pressed by reflex does nothing. Tab reaches the confirm button, then the close button. Escape cancels. The focus returns to the opener.
- Live regions: none. The result of the action, when it must be said, is the page’s, through LiveRegion.
Content rules
French. The title is the question with the verb (“Supprimer l’audit ?”). The body says the consequence in one or two sentences and, when true, “Cette action ne peut pas être annulée.” The confirm button repeats the verb (“Supprimer l’audit”); the cancel button says “Annuler”.
Do and don’t
- Do set
destructivewhen the action deletes or breaks something; the colour says the same thing as the word. - Do not write “Oui” or “OK” on the confirm button.
- Do not confirm what can be undone: an undo costs the user less than a question.
Examples
<ConfirmDialog bind:open title="Supprimer l'audit ?" confirmLabel="Supprimer l'audit" destructive onconfirm={remove}>
<p>Les 106 critères et les captures seront supprimés. Cette action ne peut pas être annulée.</p>
</ConfirmDialog>Surfaces
- App: the deletion of an audit, a page or a site, the reopening of an audit, the removal of the second factor, the revocation of every token, the deactivation of an account. No
confirm()is left in the app. - Extension: deleting an audit or a page from the panel, when the panel is on Svelte.
Related
Dialog, Button.
Decisions
- 2026-09-24: cancel first and focused. The GOV.UK and the site’s sheet both put the safe answer under the finger; a destructive default on Enter was the fault the extension’s export dialog had.
- 2026-09-24:
confirmLabelis required, not defaulted, so that a caller has to write the verb.
Criteria held by construction
- 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
The confirm button is labelled by the caller with a verb that says the effect; the component refuses to render one without a label, so no dialog closes on an OK. - 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
Two real buttons in a dialog form: Enter confirms, Escape cancels, Tab walks between them, and the browser holds the focus inside. - 12.8, Dans chaque page web, l'ordre de tabulation est-il cohérent ?
The initial focus lands on the cancel button and the browser returns it to the opener afterwards, so a careless Enter does nothing and the order resumes where it was.
Tokens it reads
- Spacing:
--rl-space-3