Modal

A modal is an interface element that appears over other content. It requires an interaction from the user before they can return to the original content

Figma

Up to date

Status

Stable

HTML

Available

React

Available

Twig

Available

Design Usage

The modal displays important information to a user without requiring them to navigate to a new page. It can be disruptive and should be used thoughtfully

The modal component has 3 parts that are designed for different types of content. The Header (part 1) contains a header describing the name of the interaction for which the modal is intended. The Body (part 2) can hold any content, it may be longer than the current height, in which case it is possible to scroll in this area. The Footer (part 3) holds the confirmation of a user action or a safe step back.

A maximum of two buttons in the modal footer (Large Content variant) with clear and predictable copy keeps the user's decision smooth and easy

There are components that can be sometimes a lesser disruption for a user e.g. Accordeon or Collapse

We recommend avoiding auto-triggered modals