Refine By

Dialog

  • Contents:

Dialogs help users by:

  • Acknowledging an error and providing a quick solution
  • Confirming an action before proceeding
  • Reducing user errors 

Guidelines

 
  • Only use dialogs when actions have strong consequences or when the action can’t be easily reversed.
  • Use dialogs sparingly. They interrupt a user’s flow, which is frustrating and makes them more likely to abandon the journey.

Dialogs are made of the following components. Keep each short and precise:

  • Title: Describes the purpose of the message. Some mobile platforms may not always display the title, so don’t depend on it to convey meaning. Recommends title length to be less than 60 characters long so it won’t go beyond two lines on mobile.

  • Body: Explains why the dialog appeared and what the user should do next.
  • Buttons: A primary CTA button is always necessary to confirm the desired action. A secondary CTA may give users the option to cancel.
  • Close button (optional): A close button allows users to dismiss the dialog without making a choice. It is usually an “x”. Clicking on the background overlay will not dismiss the message.
  • Use an acknowledgement modal to remove uncertainty about an action has occurred or to even undo said action.

Accessibility

 

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details