Confirmation
A confirmation ensures a user understands what will happen if they take an action that’s destructive, complex, or has an unexpected result.
// import all ingredients for the confirmation pattern
import {AlertDialog} from '@twilio-paste/core/alert-dialog';
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.
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 case | Sample text | Sample CTAs |
|---|---|---|
| User wants to delete something | Delete [thing]? You’re deleting [object name]. You cannot undo this action. | Cancel | Delete [thing] |
| User wants to delete something that has major consequences | Delete [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 something | Change [thing]? When you change [thing], your [objects] are deleted. | Cancel | Change [thing] |
| User wants to leave a flow but may want to save changes | Save 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 saved | Stop [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