Modal

Use Modal to create an a11y-friendly modal dialog.

Note: ModalDemo is a simple class for demonstration that maintains an isOpen variable in its state.

<ModalDemo>
    <Modal
      header={<Heading.h1>Modal Title</Heading.h1>}
      width={["200px", "300px"]}
      enableOverflow
    >
        <Text>Modal Content</Text>
    </Modal>
</ModalDemo>

Props

PropTypeDescription
isOpenbooleanControls display status of modal
onClosefunctionExecuted when modal is closed
bgstringColor of dialog background
zIndexnumberz-index of dialog
imgModebooleanAdd padding to the modal dialog when true
widthArrayOf.stringWidth of the modal at Design System's responsive breakpoints
disableCloseButtonArrayOf.stringThere will be a floating close button. When enabledOverflow = true, it's there by default.
enableOverflowbooleanWhen enabled, the modal will extend over the screen based on content, otherwise it will follow height
heightArrayOf.stringResponsive height, when enableOverflow={true}, it's not in use

Prevent Background Scrolling

Use the ScrollLock helper to prevent the background content from scrolling when the modal is open.