A NSW Government website
Design System v3.16.0

Dialog

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

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 meet WCAG 2.1 AA accessibility guidelines.

Transactional

Single call to action

Danger

Dismissible