Component Status
Healthy
Show details
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 user's decision smooth and easy
- There are components which can sometimes less disrupt a user e.g. Accordeon or Collapse
- We recommend avoiding auto-triggered modals