primaryActionLabel

An alert dialog must include at least one button. The primary action label refers to the rightmost button in the dialog footer for languages that read left to right. It should use a short, actionable phrase that clearly communicates the result of selecting the action—whether that means moving forward or dismissing the dialog.

secondaryActionLabel

Alert dialogs can include up to three buttons if a secondary outline button label is defined. If no label is defined, the button won't appear. The secondary outline button should use a short, actionable phrase that clearly communicates the result of selecting the action—typically describing the previous step or an alternative choice.

description

Alert dialogs should include a description when available. The description briefly communicates any additional information or context a user needs to make a decision based on the options presented.

title

All alert dialogs must have a title. The title appears at the top of the dialog and uses a few words to convey the outcome of what will happen if a user continues with the primary action.

cancelActionLabel

By default, an alert dialog that includes a button to cancel or go back will be labeled "Cancel."

variant

Use the appropriate variant based on the context of the message:

  • Confirmation - This is the default variant for alert dialogs. Use a confirmation variant for asking a user to confirm a choice. This alert dialog has an accent button to highlight a strong preference for which action to take.
  • Information - Information alert dialogs communicate important information that a user needs to acknowledge. Before using this kind of alert dialog, make sure it's the appropriate communication channel for the message instead of a toast or a more lightweight messaging option.
  • Warning - Warning alert dialogs communicate important information related to an issue that users need to acknowledge, but that doesn't prevent them from continuing. These dialogs include an orange warning icon near the title to emphasize their importance.
  • Destructive - Destructive alert dialogs are used when a user must confirm an action that could negatively affect their data or experience, such as deleting files or contacts. These dialogs include a red (negative) button to emphasize the destructive nature of the action.
  • Error - Error alert dialogs communicate critical information about an issue the user must acknowledge. These dialogs include a warning icon to emphasize their importance.