Igloo branding


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.


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


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

  title={`Modal title`}
  onClose={() => setShow(false)}
  Modal content


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 isClosable property of the Modal to false when the Dialog component is up and then return to true when it closes.


childrenReactNodeThe content to display inside the modal
classNamestringAdd a specific class to the modal
dataTeststringAdd a data-test tag for automated tests
sizeSizeChanges the modal width
titlestringThe content for the title of the modal
isClosablebooleanRender the close button
isOpenbooleanWhether the modal is open or not
isDismissablebooleanWhether to close the overlay when the user interacts outside it
onClose() => voidHandler that is called when the overlay should close
onAfterClose() => voidHandler that is called when the modal is closed and no longer visible
closeBtnAriaLabelstringThe content for the aria-label on the close button
fullContentbooleanRemove the default padding and the title from the modal
primaryActionReactElement<any, string | JSXElementConstructor<any>>The button displayed on the right
secondaryActionReactElement<any, string | JSXElementConstructor<any>>The secondary button displayed on the left
carouselCarouselInterfaceThe object to build the carousel inside the modal
keyValuestringA unique key for the modal