Skip to main content

Modal

Component
Live

The Modal component displays critical information or actions that require immediate user response.

FigmaCode

Usage​

The Modal component interrupts a users flow to display critical information or actions that need an immediate user response. It contains no content by default, it’s content and layout is determined at a site or application level.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Modal } from "@iag/chroma-react-ui.components";

When to use​

Use a Modal to confirm an action, display urgent information, or when an immediate user response is required.

When to avoid​

Avoid using Modals for simple alerts, capturing user details, or displaying large amounts of information. Simple alerts can be conveyed with the Alert component. User details are best captured using forms. Large amounts of information can overwhelm a modal's design and purpose.

Do

  • Do ensure headlines and call to actions are clear.
  • Do use sparingly to avoid user disruption.

Types of Modals​

Modal types include transactional, where critical information requires user acknowledgment before continuing. Single call to action, where only a single acknowledgment is needed. Danger or irreversible, where the user must confirm a destructive action. Dismissible, where the Modal can be closed with no action taken. The Chroma Modal is always dismissible.

References​