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.

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.

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.

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.

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.

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.

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.

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.

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

chip

icon button