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 – live example

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 use the dialog:

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

Anatomy

1. Header: Contains the title of the dialog.
2. Content: Can contain any component.
3. Footer: The footer can contain actions.
   By default, the dialog can have one or two actions. The action buttons on a desktop device are right-aligned.
4. Resize handle (optional): If enabled, the resize handle lets users stretch and shrink the dialog. The resize handle is only available on desktop devices.

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.

Additional Options

Resizable Dialog (desktop only)

You can let desktop users change the size of the dialog. If this feature is switched on, a resize handle appears in the bottom-right corner.

Resizable dialog

Draggable Dialog (desktop only)

If you switch on the “draggable” feature, users can move the dialog around by clicking and holding on the header.

Draggable dialog

Responsive Behavior

By default, dialogs appear as modal windows. On mobile devices, you can use the stretch property to show a dialog in full screen mode.

• On small devices, you can use the regular dialog or the full screen dialog.
• On smartphones, we recommend using the full screen dialog.

Related Links