Guide-Modals | UX Design Guide

Displaying important information: for critical alerts or details that require immediate attention, such as a timeout notification.
Gathering user input: collecting information, like credit card details or profile information, without redirecting the user to a new page.
Confirming destructive actions: preventing irreversible mistakes by requiring user confirmation before a significant change or transaction.
Guiding users: providing a focused space for multi-step processes or tutorials, though care must be taken with complex tasks.
In summary: Use modals for important alerts and notifications, confirmation of an action or actions, quick tasks, onboarding or tours, data input.

Contextual relevance: use modals for tasks that are relevant to the current user activity or can streamline a task.
Clear content and actions: include a descriptive title and clear, action-oriented button labels to tell users exactly what will happen.
Keyboard accessibility: ensure users can close the modal by pressing the Escape key and trapping focus so the keyboard cannot interact with the background content.
Avoid unnecessary disruption: do not use modals for non-critical information, such as general pop-ups or simple requests that can be handled in the main interface.
Focus and accessibility: the modal should demand attention, requiring the user to interact with it before returning to the main page.
Visual hierarchy: a transparent overlay behind the modal can give users a sense of the main application while keeping the focus on the modal.

Modals