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.

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}
/>

API

PropTypeDescription
classNamestringAdd a specific class to the dialog
dataTeststringAdd a data-test tag for automated tests
dismissTextstringThe text for the dismiss button
isOpenbooleanWhether the dialog is open or not
onDismiss() => voidHandler that is called when the overlay should close
onAfterDismiss() => voidHandler that is called when the dialog is closed and the animation is complete
onValidate() => voidHandler that is called when the validate button is clicked
subTitlestringThe text for the subtitle of the dialog
titlestringThe text for the title of the dialog
validateTextstringThe text for the validate button