Confirmation prompts

Add safeguards that catch the user's attention before validating an action.

Confirming an action

Use a

Modal when you need to interrupt a user and ask them to confirm an action.

Structure

1. Title mandatory

   • Whenever possible, frame it as a question that provides context for the action. Don't use "Are you sure?"
   • Focus the question on what's important to the user and in a way that assumes intent from them. For example Discard 7 changes? instead of Exit without saving?
   • Avoid including text variables in the title, especially for things users can input without character limits, or with long limits. This is often the case with object labels. For example, Apply configuration changes? instead of Apply configuration changes to Loremipsum-dolorsitamet-consectetur-adipiscing-elit deployment?
2. Body mandatory

   1. Cause optional

      • If the context is important to know, add it.
   2. Consequences mandatory

      • Let users know what happens if they continue.
      • If possible, list the objects that may be impacted.
      • Don't repeat the title.
   3. More information optional

      • If necessary, anticipate user questions or need for help by including a link to a relevant source of information (like docs).
3. Calls to action mandatory

   • The main action confirms the question asked in the title.
   • If there's enough space and it is relevant, include the number of impacted objects and their noun. For example Invite 3 users instead of Send invite.
   • Always provide a secondary CTA that allows users to leave the prompt without taking an action.
   • Not all choices are binary. Add a third CTA when it makes sense for common that actions users would want to do.
   • Make sure each CTA is explicit and not ambiguous with the other CTAs next to it.

Confirming a destructive action

Asking to confirm a delete or remove action follows the same principles as the default pattern, with 2 additions:

• The main CTA is extra clear on what is about to be deleted with a clear noun, in addition to visual clues (color.danger token).
• The body is unambiguous about what won’t be recoverable after the action is confirmed.
• Optionally, and depending on the importance of the destructive action, you may include an extra confirmation within the body of the modal. If you do so, use something generic, such as "delete" or that users can copy easily that will remind them of what they are actually deleting.