Confirmations

By confirming intent, we can prevent the loss of important work and data, or reduce the risk of unintended sharing—empowering people to use our apps confidently and safely.

    When to use

  • Use confirmations when the action can significantly impact projects, teams, or data.
  • Use confirmations when it's difficult or impossible to reverse an action.
  • Don't use confirmations for easy-to-undo actions or if they have no implications.
    They might become easy to miss if used too often or for actions with minimal impact.

    Design your message

  • Aim to help people recognize the action just by scanning the heading.
  • Directly name the action to reflect what's happening (Delete project, Archive team, etc.).
  • Start with the verb to make the message clear at a glance.
  • Be direct, concise, and precise.
  • Skip vague and wordy “Do you want to” or ambiguous “Are you sure.”

Delete this project?
Continue without saving?
Share reports outside the team?

Are you sure you want to delete this project?
Do you want to continue without saving?
Confirmation required


    Include details

  • Use the description to give valuable details, such as who or what will be affected.
  • Let people know if they can't reverse the action.
  • Don't repeat the heading to make those details noticeable.

    Match the button

  • When designing your call to action, ensure it echoes the heading.
  • Aim to pair the verb with the action to boost confidence in the decision.
  • Avoid vague labels like Confirm or Yes/No to keep the action crystal clear.
  • Be mindful of widely-used general buttons, such as Cancel or Save.
    They might be confusing in certain contexts or when paired with a similar action.
An example of clearly structured confirmation messages.

Do

Clear, precise messages ensure smooth navigation and prevent errors.

An example of vague and confusing confirmation messages.

Don't

Vague wording adds to cognitive load, lowering trust in the interface.


Share your feedback on the #design-systems channel in Slack.