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
Do
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
Anatomy of a dialog
- 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.
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)
Resizable dialog
Draggable Dialog (desktop only)
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.
Full screen dialog on smartphone
Regular dialog on smartphone