Alert dialog 🚧

Overview

Dialog appears in response to an action

A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs should always be in response to a user action and should never appear unprovoked.

Dialogs open in the center of the viewport and disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialog appears in response to an actionDialogs should always appear in response to an action taken on the page.
Alert Dialogs are modalDialogs should open in front of all app content in the center of the viewport.
Alert Dialogs require an action to closeDialogs should require an action to be taken before proceeding/closing.


Component structure

Alert Dialog with component parts

1. Title

The title uses the {type-class} and should be used to confirm the action being attempted. No more than two lines of text for titles.

2. Supporting text

Supporting text length is much more flexible when using dialogs. Short and concise is always preferable but there is room to be a little more verbose if needed. Aim for 2-3 sentences ideally, 5-6 sentences max.

3. Container

The container should use a min-width of {value} and a max-width of {value}. These are the default values set by {react-component-name}. Refer to Usage for code examples.

4. Buttons

Like alerts, dialogs require acknowledgment before closing. A dialog should have a {primary-button} that serves as final confirmation for the action being attempted. A dialog may optionally feature a {secondary-button} to dismiss the modal.

Usage

Dialogs are classified as high urgency. Dialogs require an action to be taken before proceeding, and are highly and purposefully interruptive to the user experience. Use them sparingly.

ComponentUrgencyContentBehaviorActionsExample
SnackbarLowInformationalTransient (3-10 seconds)0-1Featured added, "Successfully updated a shared draft"
AlertMediumAwareness of statePersistent, nonmodal, dismissable1-2Your page has been successfully published
Alert dialogHighRequire a choice/acknowledgementPersistent, modal, dismissable1-2Are you sure you want to use the shared draft?

Default

The default Snackbar should communicate neutral information about the system.

Accessibility

  • Set the user focus on the Dialog when it appears so that the screen reader will immediately read the information to the user.
  • Set user focus on Dialog close action.
    • Generally, focus should be set back to the point where the action was taken so that the user doesn’t orientation isn’t disrupted.
    • Some workflows may need different focus management.
  • Keyboard support is needed.
    • Tabbing and arrows will not work outside of the dialog while the Dialog is active.
    • Focus may be set to the tabbable object which is most likely the user’s next action (such as a confirmation button).
  • Do not use role=``"``alert``" for Dialogs. The focus set to the dialog will read it to the user, and the role change will cause the dialog to be read twice. Use role=``"``alertdialog``" instead.
  • ESC key should close the dialog.
  • https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/alertdialog.html

Sources