When to use a dialog
- Giving an alert: display critical messages or notifications to the user.
- Needing confirmation: ask the user to confirm or cancel an action before proceeding.
- Giving users a prompt: request user input by presenting a message and providing an input field or options to select from.
- Allowing users to share: enable users to share content or collaborate with others by entering email addresses or selecting contacts.
Behavior
Typically, dialogs will overlay the page. They should have a dismiss or cancel button somewhere on the dialog. Users should also be able to hit the ‘Esc’ key to close it.
Best practices
Accessibility
Automatically focus on the first interactive element within the dialog when it opens, and return focus to the triggering element when the dialog closes. Ensure screen readers can interpret and navigate the dialog.
Give clear actions
Provide clear and distinct actions within the dialog, such as ‘OK,’ ‘Cancel,’ ‘Yes,’ or ‘No.’ Use descriptive labels to make actions easily understandable.