Intro

The dialog component is a modal window that appears temporarily on top of the main screen. It interrupts the current app process to prompt the user for a response. While the dialog is open, the main screen is dimmed and blocked. A user action or confirmation is required to return to the main window.

Standard dialog

When to Use

Use the dialog:

To display information temporarily.
To prompt the user for an action or a confirmation.
To display an additional step or process that needs to be confirmed by a user action.

Don't

Don’t use the dialog:

If you don’t want to interrupt the user.
In another dialog. Avoid nesting dialogs within each other.

Anatomy

Header: Contains the title of the dialog.
Content: Can contain any component.
Footer: Can contain actions that affect the entire dialog.
Resize handle (optional): If enabled, the resize handle lets users stretch and shrink the dialog. The resize handle is only available on desktop devices.

Anatomy of a dialog

Behavior and Interaction

The dialog opens in a modal window at the center of the screen. Completing an action or closing the dialog returns the user to the main screen.

By default, the dialog footer contains one or two actions. Depending on the specific use case, more actions are also allowed.

Always use an emphasized button for the primary action in the footer. The dialog footer can have only one primary action.

If the footer contains a single action with a negative path, such as Close, use a transparent button. Negative paths navigate away from the dialog without executing any actions.