Skip to contentSkip to navigationSkip to topbar
Figma
Star

Confirmation

A confirmation ensures a user understands what will happen if they take an action that’s destructive, complex, or has an unexpected result.


Ingredients

Ingredients page anchor

Alert Dialog

// import all ingredients for the confirmation pattern

import {AlertDialog} from '@twilio-paste/core/alert-dialog';

General

General page anchor

Use a confirmation to ask the user to verify that they want to proceed with a complex action, or one with significant or unanticipated consequences (like irreversibility). Confirmation messages are always triggered by an initial user action. Confirmations are displayed using an Alert Dialog, since it requires the user to interact with the component.

Each confirmation Alert Dialog should follow a predictable content pattern.

Heading

Heading page anchor

The Heading should be phrased as a question. In general:

  • Avoid using articles like “the” or “a.”
  • Avoid the phrase “Are you sure?”
  • Use sentence case.

The Paragraph should include 1-3 sentences that explain the outcomes of the actions. If the action is irreversible, say so.

Confirmation messages typically have 2 Buttons: one that confirms the action and another that offers an alternative. Labels should be short and mirror the language in the title whenever possible.

Confirmation messages are used in a variety of situations where it’s important to confirm that the user wants to proceed with an action, like saving changes before exiting, starting a process that could incur unexpected costs, or deleting something.

Use caseSample textSample CTAs
User wants to delete somethingDelete [thing]?
You’re deleting [object name]. You cannot undo this action.
Cancel | Delete [thing]
User wants to delete something that has major consequencesDelete [thing]?
When you delete [thing], all [objects] are permanently deleted. You cannot undo this action. Enter [user input] to delete [thing]
Cancel | Delete [thing]
User wants to change somethingChange [thing]?
When you change [thing], your [objects] are deleted.
Cancel | Change [thing]
User wants to leave a flow but may want to save changesSave changes?
If you close without saving, changes are lost.
Close without saving | Save and close
User wants to leave a flow but changes can’t be savedStop [doing thing]?
Your changes will not be saved.
Keep [doing thing] | Stop [doing thing]
User wants to perform an action that has implications for resources (money, credits, etc.)Use title to repeat action
Explain what could happen to the resource, and offer other options if available and appropriate.
Offer clear alternatives
Do

Tell the user if they cannot undo the action.

Don't

Don't use confirmation messages for routine, easily reversed actions.

Do

Phrase the heading as a question.

Don't

Don't use the phrase “Are you sure?”

Do

Make the buttons clear alternatives.

Don't

Don't use a Cancel as a CTA button if the user action is related to cancellation. It's confusing!

Coming soon

Coming soon