Components

Dialog

Dialog allows you to create both modal and non-modal dialogs based on the HTML dialog element.

Overview Code Accessibility

Use Dialog when

the user needs to focus on a specific task
you need to ensure that the user notices important information

Avoid Dialog when

the content is extensive or complex
the process contains several steps
interrupting the user’s workflow may be problematic, use Alert, Popover or a non-modal Dialog instead

Example

With blocks

Dialog can be divided with visual separators to keep the content clearly structured.

With form

When a Dialog contains form elements, it is helpful to move focus directly to the first field, unless other important content should be read first.

Guidelines

Use Dialog to present important content that requires the user’s attention or action. We avoid calling the component “modal”, since it can also function as non-modal.

Dialog can be used as both modal and non-modal.

A modal Dialog is a temporary window that opens above the rest of the page. It captures the user’s attention and prevents interaction with other content, while still preserving the context of the page.

Use of modal Dialog should generally be limited, but it can be helpful when the user must consider information, confirm an action, or focus on a specific task without navigating away from the page.

A non-modal Dialog allows the user to continue interacting with the rest of the page while the dialog is open. It should be used with care and is most suitable for providing supplementary information or extra functionality that does not require full attention.

Closing a `Dialog`

Ensure that users always have a clear and simple way to close a Dialog. The most common solution is a close button (X) in the top right corner. It must remain visible even when the dialog contains a lot of content and scrolling is required.

If placing a close button (X) in the top right corner is not appropriate, the dialog must include a clear close action within the content, for example a Cancel button. This gives users control and prevents them from getting stuck in the dialog.

Text

Use a short and concise heading. The heading must make it clear to the user that the context has changed.
Avoid long blocks of text.
Ensure that the purpose is clear and that all necessary information is available within the dialog.

Edit this page on github.com (opens in a new tab)