Skip to content
design system
Thème d’affichage, actuellement Auto

Pattern · actions

Destructive confirmation

Before an action that cannot be undone: a question with the verb, the consequence, the cancel button first and focused, the confirm button in the colour of what it does, and the outcome announced afterwards.

The pattern, live

  • Démarches en ligne, septembre 12 pages
  • Portail famille 8 pages
  • Site de la médiathèque 9 pages

Supprimer l'audit ?

« » et ses pages seront supprimés, avec les captures et les commentaires. Cette action ne peut pas être annulée.

How it works

  1. The row's button says the verb, in the destructive variant, small because it sits in a list.
  2. One dialog for the whole list: the page keeps which audit is asked about and opens the dialog by setting open.
  3. The question repeats the verb; the body names what is deleted and says it cannot be undone. The cancel button is first and focused, so a reflex Enter does nothing.
  4. Escape, the close button and "Annuler" all call oncancel; only "Supprimer l'audit" calls onconfirm.
  5. The outcome is announced by a live region present from the first render; the browser has put the focus back on the row's button, or on the list when the row is gone.

Rules a page that copies it keeps

  • Confirm only what cannot be undone; an undo costs the user less than a question.
  • Never "OK" or "Oui" on the confirm button: the verb of the action.
  • The body says the consequence, not "Êtes-vous sûr".
  • The outcome is said once, by the page, not by the dialog.

Built with