Overview

The modal component displays a popup covering the rest of the screen.

Usage

• Always deploy a semi-transparent overlay behind the modal to obscure the underlying interface elements. Always use the Popover color behind the modal.
• Ensure that the modal is activated only in scenarios necessitating critical user engagement or confirmation, such as data entry, error alerts, or pivotal decision points.
• Only use the large modal when there is wide content.
• Incorporate multiple intuitive mechanisms for dismissing the modal, including a conspicuous close button, an accessible escape key function, and a click-to-dismiss feature on the overlay.
• On activation, direct the keyboard focus to the initial interactive element within the modal. Upon dismissal, return the focus to the triggering element.
• Structure the modal content with a clear visual hierarchy, prioritizing critical information and actionable items.
• Ensure the modal is fully responsive, adapting gracefully to various screen sizes and orientations.

Variants

There are two modal sizes: large and default. The modal body is highly customizable and can be changed depending on the context it was opened in.