Skip to main content

Modal

Modals display content in a focused window on top of the existing app content. These can be used for various types of messages or app based actions.

Installation​

Install

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

Import

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

Accessibility​

A modal dialog needs to inform screen reader users about is content and purpose so it helps to be labelled with a description. This can be achieved by using the labelledby prop to associate with a heading, and/or the describedby prop to associate with a short meaningful description.

Accessibility documentation(opens in new window)

Default​

In the example below the Button has been wrapped with its own BrandProvider with the brand set using the BrandProvider to demonstrate the correct font being used in the modal content. Due to the Modal creating the overlay content as a React portal that sits outside of the root element it does not have the correct Chroma classes available to apply the brand tokens, therefore it utilises the context provided by the BrandProvider to generate the correct class name and apply to the outer ReactModalPortal container.

Disable Overlay Functionality​

You can set shouldCloseOnOverlayClick as false to disable the overlay event which closes the modal window.

Custom Styling​

You can use the style prop to change the width and height of the modal. The style prop has two keys, overlay and content.

style prop​

<Modal
    style: {{
      overlay: { /* This is the modal background */ },
      content: { /* This is the modal window */ }
    }}
  />

This example will set the modal max width to 1024px.

Properties​

CSS Variables​