Nielsen Design System

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.

Component Variants

In Progress

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.

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.

Table of Contents

Related Components