Modal allows to prompt users to take or complete an action.

Component Status

Show details
Published: June 22, 2022
Updated: July 11, 2023

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