...
A modal is a large rectangular component that appears in the center of a user's screen, temporarily interrupting their workflow to prompt immediate action. Modals are triggered by user-initiated actions, such as requesting to delete content that can’t be restored or attempting to leave a page without savingconfirmation of key information to proceed with a workflow. When a modal is presented, the background content is typically disabled to draw the user's focus to the modal’s content. The user is expected to complete the action requested within the modal or dismiss it.
...
For example, in Figure 1, the user has attempted to close the document they are working on without saving their most recent changes. This would be considered a critical and irreversible error, resulting in frustration for the user. This modal, triggered by the user requesting to close the document, requests the user to perform an action to prevent the critical error, or confirm they wish to proceed without saving if this truly is what they meant to do.
...
When to use this Component
...
Do not use modals for system-initiated content such as informational and warning messages, see Page Alerts instead
Do not use modals for decisions that will require additional information
Do not use modals during challenging, time-sensitive, or important workflows. Modals break the users' focus and can cause them to forget where they were
Do not use modals for complex data entry, this should be done on a page or in a wizard
Best practices
Do
Fill 25% of the screen when viewing on desktop. When viewed in smaller viewports, modals should take up the full screen to ensure they are visible and readable
Disable and apply a translucent overlay to background content to draw the user's attention to the modal
Keep the content in modals concise, clear, and action-oriented so users can quickly understand the action they need to take
Set the keyboard focus to the modal when it appears, ensuring that keyboard or assistive technology users can easily interact with the modal's content. When the modal is closed, ensure that focus is returned to its original location from before the modal was activated
...
The body text in the modal should further inform users of the goal of the modal and provide any information or guidance needed to make a decision or complete an action. This text should be brief and no more than 1 to 2 sentences.
add something about data entry and validation
Call to action
The call to action, typically in the form of a button, prompts the user to perform the action the modal is requesting of them. The text on this button should be action-oriented and make it clear to the user what decision or action they are performing. Depending on the purpose of the modal,
Dismiss modal
Modals should include a way for the user to close or dismiss the modal without performing the action being requested by them. This is typically done through a close or cancel button, or an icon such as an “X”.
...