Dialog

Overview
Specs
Guidelines

Pattern

Dialog modals are small overlay windows primarily used to display information. Since they disable the background interface, they are an effective way of ensuring that users receive important details about their current task. Additionally, they can be used to confirm actions.

1: Title
2: Accent Icon
3: Action Button

Small Dialog – Confirmation of destructive action

Used for:

Confirm destructive actions

Dialogs are used to confirm critical actions, such as deletions or submissions, where irreversible changes occur.

Focus on critical information

Dialogs draw attention to essential information or actions that require user acknowledgment or response. By temporarily blocking the background, they ensure the user focuses on the task at hand.

Onboarding or tutorials

Use dialogs to guide new users through important features or processes in an application. This can help improve the onboarding experience.

Don’t use for:

Critical navigation

If users need to navigate quickly between different parts of an application, dialogs can hinder this by blocking access to the rest of the interface.

Non-critical content

Dialogs are not used for content that isn’t crucial or time-sensitive. Information that can be presented inline or on a separate page is better suited outside of a dialog.

Blocking actions

The use of dialogs that prevent users from accessing essential actions or information needed to complete their current task should be avoided. This can create frustration and disrupt the workflow.

Glossary

If you’d like, you can consult the dialogs glossary, which contains a set of dialogs, their description, associated buttons and translation into Portuguese and Spanish.