Modals

A modal is a surface that overlays the page’s main content and is used to display information, gather input or confirm actions.

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content. A modal is used to reveal critical information, show information without losing context, or when the system requires a user response. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal.

Anatomy

  1. Header. Using typography-heading-4 and color-brand-400.
  2. Body. Using typography-paragraph-regular and color-brand-400.
  3. Action. In this instance a primary button.
  4. Close icon. Using fill color-grey-300.

Component Health

Component checklist

Is documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Repository

Includes a link to an external code repository

Open link