Dialog

Resources

Properties

Best practises

• Use dialogs for focused tasks that require user attention or input (confirmations, short forms, critical alerts).
• Use modal dialogs for urgent actions that must be completed or dismissed before continuing.
• Always provide clear dismissal method, such as close button or clicking outside the dialog.
• Make sure that the dialog is is responsive and accessible on all device sizes.
• Avoid interrupting users with unexpected dialogs.
• Don't stack dialogs.

When to use

When requiring user attention for critical actions, such as confirmations, warnings or errors.
When gathering input through short forms or selections that need immediate response.
For focused interactions that temporarily block the main content.

If the content is lightweight and non-disruptive. Use snackbar, tooltip or alert instead.
If users need to reference the main content while interacting. Use drawer instead.
If the action requires longer engagement or completing multiple steps. Use a dedicated page instead.

Behaviour

Dialogs usually appear in the center of the screen and temporarily interrupt the current workflow to capture user focus. They are used across all device types, but more commonly for desktop and tablet devices. Dialogs can be modal or nonmondal:

• Modal dialogs block user interaction with the rest of the interface until closed. Use this only for urgent or critical tasks requiring immediate attentiong.
• Nonmodal dialogs allow users to continue interacting with the rest of the page. This is better suited for optional or non-disruptive interactions.

Size

Dialog size should adapt to the content, device and screen size. It should remain compact to reduce disruption. Dialogs should not dominate the screen unless necessary for the task.