...
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 confirmation of key information requesting to proceed with a workflow that requires additional information of confirmation. 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.
...
Use modals in user-initiated situations requiring immediate intervention or , critical decisions , such as irreversible errors or important confirmationsor simple data entry
When not 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 . Only request the user to input one or two simple values such as memorable dates, names or contact information. Anything that would require the user to complete multiple fields, cross-reference another source, and/ or validate the data before it is accepted should be done on a page or in broken up into multiple pages using 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 header of a modal should clearly and briefly explain the purpose or desired action that will be achieved through interacting with the modal.
Body
The body text content 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 Text should be brief and no more than 1 to 2 sentences. add something about data entry and validationIf the user is required to enter simple memorable data such as a name or date, the appropriate fields should be included in the body.
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,
...