Quick nav

Dialog

The Dialog is much like the Modal component, except it is simpler. It contains a title, sub title, dismiss action and a validate action.

Version 0.10.0

Installation

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

npm install @igloo-ui/dialog

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/dialog

Usage

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

import Dialog from '@igloo-ui/dialog';
import Button from '@igloo-ui/button';

const [open, setOpen] = React.useState(false);
const handleValidate = () => {
    alert("You said yes");
    setOpen(false);
};

<Button appearance="secondary" onClick={() => setOpen(true)}>
    open
</Button>
<Dialog
    title="Dialog title"
    subTitle="This is a sub title"
    dismissText="Cancel"
    validateText="Confirm"
    isOpen={open}
    onDismiss={() => setOpen(false)}
    onValidate={handleValidate}
/>

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 isClosable 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
`className`	string	-	Add a specific class to the dialog
`dataTest`	string	-	Add a data-test tag for automated tests
`dismissOnEscape`	boolean		Whether to close the dialog when the escape key is pressed
`dismissText`	string	-	The text for the dismiss button
`isOpen`	boolean	-	Whether the dialog is open or not
`loading`	boolean	-	Whether or not the Validate button should be loading
`onDismiss`	() => void	-	Handler that is called when the overlay should close
`onAfterDismiss`	() => void	-	Handler that is called when the dialog is closed and the animation is complete
`onValidate`	() => void	-	Handler that is called when the validate button is clicked
`subTitle`	ReactNode	-	The text for the subtitle of the dialog
`title`	string	-	The text for the title of the dialog
`validateText`	string	-	The text for the validate button
`danger`	boolean	-	A specific variant of dialog used for destructive actions