Dialog

Usage

Dialogs make a user stop and think by presenting them with a critical action or piece of information required to continue.

Use dialogs to:

• notify a user of an immediate response required to continue
• confirm a user's action when it cannot be undone
• notify a user of urgent information that affects their current process

Do:

• ensure the headline and call to actions are clear and reflect the action or task
• clearly explain the potential consequences of the action
• use danger dialogs for destructive or irreversible actions
• when required, give the user an option to close the dialog with no change
• use sparingly and only when necessary. Overuse can cause disruption to the user

Types of dialogs

• Transactional - alert a user to urgent information they must acknowledge before continuing
• Single call to action - when a single acknowledgement is required from the user
• Danger - alert a user to a destructive or irreversible action they must confirm before continuing
• Dismissible - when an action does not need to be selected and the user can return to the previous state with no change

Dismissible vs non-dismissible

Dismissible dialogs allow a user to close the dialog with no action taken via a close button in the top right corner or clicking outside the dialog container. Non-dismissible dialogs do not have a close button and a user must select a call to action button in order to proceed.

When to avoid

Do not use:

• to display simple alerts, consider in-page alerts
• to capture user details, consider simple forms
• to display large amounts of information

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Ensuring compliance through usage

Consistent help

When using the Dialog component in your project, focus on creating a smooth, accessible experience by implementing it thoughtfully within your design flow. As the Dialog will automatically handle focus management, ensure any actions leading to the Dialog's opening are intuitive and necessary for your users. Use clear and concise text for any buttons or links within the Dialog to guide users seamlessly through the interaction.

If the Dialog contains forms or complex choices, provide logical steps that align with the user journey, making it easy to understand and complete actions. Ensure the Dialog's purpose and content are directly relevant to the task at hand, allowing users to engage with the Dialog naturally and exit smoothly.

This approach will create a cohesive, accessible experience that feels effortless to navigate.