Modal

Quick nav

The Modal is an interface component positioned over the page content to emphasize new elements. It blocks standard navigation and requires interaction from the user to be dismissed.

Version 1.9.0

Installation

To install @igloo-ui/modal in your project, you will need to run the following command using npm:

npm install @igloo-ui/modal

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/modal

Usage

Then to use the component in your code just import it!

import Modal from '@igloo-ui/modal';
import Button from '@igloo-ui/button';

const [show, setShow] = useState(false);

<Button appearance="secondary" onClick={() => setShow(true)}>
  open modal
</Button>;

<Modal
  title={`Modal title`}
  isDismissable
  isClosable
  isOpen={show}
  closeBtnAriaLabel={`Close`}
  onClose={() => setShow(false)}
>
  Modal content
</Modal>;

Troubleshooting

When a Dialog opens above a Modal

In this case, when you close the Dialog, the Modal closes automatically. Here is a workaround to remedy this.

To solve the problem, set the isDismissable property of the Modal to false when the Dialog component is up and then return to true when it closes.

API

Prop	Type	Default	Description
`children`	ReactNode	-	The content to display inside the modal
`className`	string	-	Add a specific class to the modal
`dataTest`	string	-	Add a data-test tag for automated tests
`size`	Size		Changes the modal width
`title`	string	-	The content for the title of the modal
`isClosable`	boolean	-	Render the close button
`isOpen`	boolean	-	Whether the modal is open or not
`isDismissable`	boolean		Whether to close the overlay when the user interacts outside it
`onClose`	() => void	-	Handler that is called when the overlay should close
`onAfterClose`	() => void	-	Handler that is called when the modal is closed and no longer visible
`closeBtnAriaLabel`	string	-	The content for the aria-label on the close button @deprecated We now use Igloo's provider to set the aria-label
`fullContent`	boolean	-	Remove the default padding and the title from the modal
`primaryAction`	ReactElement<any, string \| JSXElementConstructor<any>>	-	The button displayed on the right
`secondaryAction`	ReactElement<any, string \| JSXElementConstructor<any>>	-	The secondary button displayed on the left of the primary button
`tertiaryAction`	ReactElement<any, string \| JSXElementConstructor<any>>	-	The 3rd button displayed on the far left
`carousel`	CarouselInterface	-	The object to build the carousel inside the modal
`keyValue`	string	-	A unique key for the modal
`dismissOnEscape`	boolean		Whether to close the modal when the escape key is pressed