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 any 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.
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.