Use our Tailwind CSS dialog component to inform users about a task or important information that require decisions, or involves multiple tasks.
A dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on screen until confirmed/dismissed.
See below our dialog example that you can use for your Tailwind CSS and React project.
import { useState } from "react";
import {
Dialog,
DialogHeader,
DialogBody,
DialogFooter
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = useState(false);
const handleOpen = (value) => setOpen(!open);
return (
<Fragment>
<Button onClick={handleOpen} variant="gradient">
Open Dialog
</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>Its a simple dialog.</DialogHeader>
<DialogBody divider>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad
reprehenderit omnis perspiciatis aut odit! Unde architecto
perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum
praesentium magni corrupti explicabo!
</DialogBody>
<DialogFooter>
<Button
variant="text"
color="red"
onClick={handleOpen}
className="mr-1"
>
<span>Cancel</span>
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
<span>Confirm</span>
</Button>
</DialogFooter>
</Dialog>
</Fragment>
);
}
The following props are available for the dialog component. These are the custom props that come with we've added for the dialog component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
open | boolean | Open the dialog | No default value its a required prop. |
handler | function | Controls open and close states for dialog | No default value its a required prop. |
size | Size | Change dialog size | md |
dismiss | Dismiss | Change backdrop dismiss listeners | undefined |
animate | Animate | Change dialog animation | undefined |
className | string | Add custom className for dialog | '' |
children | node | Add content for dialog | No default value its a required prop. |
The following props are available for the dialog header component. These are the custom props that come with we've added for the dialog header component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | string | Add custom className for dialog header | '' |
children | node | Add content for dialog header | No default value its a required prop. |
The following props are available for the dialog body component. These are the custom props that come with we've added for the dialog body component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
divider | boolean | Add border top & bottom for dialog body | false |
className | string | Add custom className for dialog body | '' |
children | node | Add content for dialog body | No default value its a required prop. |
The following props are available for the dialog footer component. These are the custom props that come with we've added for the dialog footer component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | string | Add custom className for dialog footer | '' |
children | node | Add content for dialog footer | No default value its a required prop. |
type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
type dismissType = {
enabled?: boolean;
escapeKey?: boolean;
referencePointerDown?: boolean;
outsidePointerDown?: boolean;
ancestorScroll?: boolean;
bubbles?: boolean;
};
type animate = {
mount?: Object;
unmount?: Object;
};