Modal - Usage

Basic Guidelines

The Modal appears on top of the main content and temporarily disables all other page contents until it is dismissed by closing or an action.

Users are easily distracted, so sometimes there is a requirement to grab their full attention. A Modal does exactly that: it requires people to focus on a single task before continuing.

Do not use it to show error, success, or warning messages, these should be handled with either the Notification or Toast components.

Set up in Figma

The Modal is set up as a composable component. It is used by replacing the content placeholder by a locally created component.

Include any necessary padding in your local component.

Variants Usage

Overlay Modal (Full screen OFF)

Overlay Modals sit on top of a Scrim, fit to the corresponding grid and span to a max width of 660px. In Figma, the scrim is available as a separate component “Modal-Scrim”.

This example is downscaled to fit into the documentation.

Modal with padding

There is a 60px padding on top of the component. This variant should be used when there is headline copy, but no image within the Modal.

Modal without padding

Without padding, the Icon Button to close the Modal floats on top of its contents. This variant should be used when there is an image at the top of the Modal.

Alignment

The Modal component must align with the grid system set out in Foundations. It sits in-line with the rest of the text.

Full Screen Modal

Full Screen Modals always span full width and height of viewport.

Dialog Modal

Dialog Modals span no wider than 660px.

Notes on Accessibility

When using the Overlay variant (Full screen OFF) please make sure the Icon Button component is still accessible. If it is not, you can change the Appearance settings within the Icon Button component.