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
- Header: Contains the title of the dialog.
- Content: Can contain any component.
- 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.
- 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.
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.
Draggable Dialog (desktop only)
If you switch on the “draggable” feature, users can move the dialog around by clicking and holding on the header.
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.