A confirmation modal is a type of modal that asks users to verify if they would like to proceed with an action.

Structure

Title: The title states what action users are about to do. It should be short, descriptive and always start with a verb.

Examples: “Close the page”, “Change book location”.

Content: The content is short and states what will happen if users proceed with the action.

Button: A minimum of two buttons (one primary and one default) should be placed. The primary button should be located on the right-hand side while the close default button should be on the left-hand side of the modal. Below are the 3 main rules to follow for confirmation modal buttons:

  •  Labels summarize what will happen on click. So instead of labelling buttons “Confirm” and “Cancel” use the following format “Confirm {type}” and “Cancel {type}”.
  • In the case of a cancelling confirmation modal, buttons should be labelled as follow: “Cancel {type}” and “Keep {type]”.
  • If secondary actions are needed, buttons in the default style should be added next to the primary button.
Confirmation modal
Cancelling confirmation modal

Extra confirmation step: For dangerous operations, a modal in the danger style should be display and users should type the action they would like to perform before confirming. In the following example, users need to type “Reset ” before clicking on the reset button.

Extra confirmation step example

Behavior

When an action has been performed, the confirmation modal appears.

Since modals display important information, they aren’t dismissable, users consciously dismiss them by clicking on the close/cancel button or choosing another action.

Related pages

The “Add new” modal, like the create dialog box, is used to add content.
This modal acts as a confirmation window for bulk actions.
The information modal is a modal that gives users critical information about an action they performed.
A modal is a container triggered by a user’s action to give critical information about the action, to ask the user to take a decision ...
This modal is a confirmation modal that prevents users from leaving an edit record page without saving changes.