Modal
Last Updated on Sep 29, 2022
Modals are containers used to overlay content above the interface. They are used to focus the user’s attention on a single task.

Design Principles

  • A modal is a container that exists at a higher elevation than the rest of the content. It is a very flexible component. A variety of elements can exist inside.
  • Use a modal to direct the user action or attention to a single critical task.
  • Modals have three different widths (512px, 768px, and 1024px) that align to our layout design tokens. Don’t change the width of a modal from these sizes. Heights of modals can be variable depending on content.
  • Simple multi-step processes are allowed in modals. They should use a horizontal stepper at the top and shouldn’t have more than a few steps. Use this only if it’s important the user stays on the current screen and the multi-step processes can be simply achieved in the modal. For more complicated multi-step processes use a report builder or form builder pattern.

Do's and Don'ts

Use whenever there is a singular, clear sub task to accomplish on a page.
Use the smallest modal width that fits your content.
Always label modals with a heading that appropriately names the space or task they are viewing.
Don’t remove the faded background from a modal. They are required when using a modal.
Don’t open multiple modals on top of each other. Dialogs, popovers, and other feedback messages are fine to use or open from a modal.
Don’t use a modal to re-create a dialog or other message.