Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Usage Guidance
Use clear and concise language
Modals can disrupt a user's workflow, and users often want to dismiss them to return to their tasks quickly. When modals become necessary, use clear and easy-to-understand language.
Do
Offer to the point messaging. In this example, a clear warning is issued for an action that has permanent results.
Don't
Avoid wordy text if the message can be expressed more efficiently.
Use modals to prevent errors
If the task involves critical steps that are difficult or cannot be reversed, a modal displaying a warning is recommended.
Do
A modal here may be used to determine the role of the user at the onset as it simplifies the workflow thereafter by providing only the applicable options.
Don't
Do not use a modal that interrupts a user’s workflow without providing any added value. In this case, the collected data does not directly help the user’s current task at hand.
Use modals to simplify workflows
A modal may be used if the information being solicited helps to reduce complexity.
Do
A modal here may be used to determine the role of the user at the onset as it simplifies the workflow thereafter by providing only the applicable options.
Don't
Do not use a modal that interrupts a user’s workflow without any providing any added value. In this case, the collected data does not directly help the user’s current task at hand.
A modal may break down long and/or complex workflow into more consumable parts. The use of wizards is a common example.
Do
In this case, the workflow breaks down the complex steps of building a report into 5 different screens. These screens may group related actions together to help guide the user to complete the task successfully.
Don't
This example shows a modal containing a workflow that involves 30 screens. Not only this does not simplify the task for the user, but it also locks the user in this mode. If the user requires information from another part of the application, there may be no way to exit the modal without losing the data within it.
Do
Keep instructions simple and the context limited to avoid crowding too much information into the limited space.
Don't
Do not put as much information as possible into one screen in order to reduce the number of steps. Condensing too much data into the modal makes difficult to navigate through the workflow.
Dismiss on overlay click
By default, dismissal on overlay click is disabled, but the coded component itself has the option to enable this behavior; however, this should ONLY be enabled if...
- The content DOES NOT contain critical/essential information, like important notices the user should read in full.

- The modal IS NOT a “DANGER” variant

- The modal DOES NOT contain a large form, and the user progress can be lost, e.g, a code editor inside the modal, a multi-step form, or any form that contains more than 5 form fields.
The overlay should not be focusable, meaning that, even when the "click on overlay to dismiss" is enabled, the dismiss button SHOULD be also be visible, for people who use screen readers or navigate via the keyboard.
Related components
Side Sheet
A container that slides in from the right hand edge of the screen, containing supplementary content and controls that enhance and don’t interrupt the primary user flow of a given page.
CTA Group
As the name suggests CTA Groups are used for adding up to 3 CTAs to forms or dialog-type components.