EDS – Equinor Design System

Notification dialog

Dialogs display critical notifications and required actions.

Guidelines

A dialog is a modal window that appears over everything on the screen and always over a Scrim. Dialogs can appear without warning and require users to stop their current task so they should be used sparingly. The dialog disables all application functionality and requires an action to be taken in order to be dismissed.

In the notification family, dialogs are the most interruptive. Banners deliver medium priority slightly interruptive notifications, Snackbars deliver low priority un-interruptive notifications. Since dialogs are very disruptive, they should be used only in critical situations.

Don’t

  • Do not use a dialog if a Snackbar or Banner would work better.
  • Do not use a dialog without a Scrim behind it.
  • Do not allow a dialog to be dismissed by clicking on the Scrim.
  • Do no scroll away a dialog.

Variations

Dialogs can contain a Title, Content and Actions. A dialog can have one or two actions, but never a third. Actions should always be related to the message. Dialogs should try to avoid scrollable content. When scrolling is necessary, the title and actions are fixed and the content scrolls. There are five dialog variations available for use: Text + actions, Placeholder + actions, Placeholder, Scrollable placeholder + actions and No title + text + actions.

FigmaExternal linkFigma design for dialog

✏️ Edit this page on GitHub