Tailwind CSS Dialog - React

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>
  );
}

Dialog Props

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.

AttributeTypeDescriptionDefault
openbooleanOpen the dialogNo default value its a required prop.
handlerfunctionControls open and close states for dialogNo default value its a required prop.
sizeSizeChange dialog sizemd
dismissDismissChange backdrop dismiss listenersundefined
animateAnimateChange dialog animationundefined
classNamestringAdd custom className for dialog''
childrennodeAdd content for dialogNo default value its a required prop.

Dialog Header Props

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.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for dialog header''
childrennodeAdd content for dialog headerNo default value its a required prop.

Dialog Body Props

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.

AttributeTypeDescriptionDefault
dividerbooleanAdd border top & bottom for dialog bodyfalse
classNamestringAdd custom className for dialog body''
childrennodeAdd content for dialog bodyNo default value its a required prop.

Dialog Footer Props

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.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for dialog footer''
childrennodeAdd content for dialog footerNo default value its a required prop.

Types

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;
};
Edit this page on Github