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 { Fragment, useState } from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = useState(false);
const handleOpen = () => 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 Dialog
component comes with 6 different sizes that you can change it using the size
prop.
import { Fragment, useState } from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export default function Example() {
const [size, setSize] = useState(null);
const handleOpen = (value) => setSize(value);
return (
<Fragment>
<div className="mb-3 flex gap-3">
<Button onClick={() => handleOpen("xs")} variant="gradient">
Open Dialog XS
</Button>
<Button onClick={() => handleOpen("sm")} variant="gradient">
Open Dialog SM
</Button>
<Button onClick={() => handleOpen("md")} variant="gradient">
Open Dialog MD
</Button>
</div>
<div className="flex gap-3">
<Button onClick={() => handleOpen("lg")} variant="gradient">
Open Dialog LG
</Button>
<Button onClick={() => handleOpen("xl")} variant="gradient">
Open Dialog XL
</Button>
<Button onClick={() => handleOpen("xxl")} variant="gradient">
Open Dialog XXL
</Button>
</div>
<Dialog
open={
size === "xs" ||
size === "sm" ||
size === "md" ||
size === "lg" ||
size === "xl" ||
size === "xxl"
}
size={size || "md"}
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(null)}
className="mr-1"
>
<span>Cancel</span>
</Button>
<Button
variant="gradient"
color="green"
onClick={() => handleOpen(null)}
>
<span>Confirm</span>
</Button>
</DialogFooter>
</Dialog>
</Fragment>
);
}
You can modify the open/close state animation for Dialog
component using the animate
prop.
import { Fragment, useState } from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(!open);
return (
<Fragment>
<Button onClick={handleOpen} variant="gradient">
Open Dialog
</Button>
<Dialog
open={open}
handler={handleOpen}
animate={{
mount: { scale: 1, y: 0 },
unmount: { scale: 0.9, y: -100 },
}}
>
<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>
);
}
Use the example below to create a dialog with a sign in form.
import React from "react";
import {
Button,
Dialog,
Card,
CardHeader,
CardBody,
CardFooter,
Typography,
Input,
Checkbox,
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
return (
<React.Fragment>
<Button onClick={handleOpen}>Sign In</Button>
<Dialog
size="xs"
open={open}
handler={handleOpen}
className="bg-transparent shadow-none"
>
<Card className="mx-auto w-full max-w-[24rem]">
<CardHeader
variant="gradient"
color="blue"
className="mb-4 grid h-28 place-items-center"
>
<Typography variant="h3" color="white">
Sign In
</Typography>
</CardHeader>
<CardBody className="flex flex-col gap-4">
<Input label="Email" size="lg" />
<Input label="Password" size="lg" />
<div className="-ml-2.5">
<Checkbox label="Remember Me" />
</div>
</CardBody>
<CardFooter className="pt-0">
<Button variant="gradient" onClick={handleOpen} fullWidth>
Sign In
</Button>
<Typography variant="small" className="mt-6 flex justify-center">
Don't have an account?
<Typography
as="a"
href="#signup"
variant="small"
color="blue"
className="ml-1 font-bold"
onClick={handleOpen}
>
Sign up
</Typography>
</Typography>
</CardFooter>
</Card>
</Dialog>
</React.Fragment>
);
}
Use the example below to create a dialog with an image inside, similar to unsplash.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Avatar,
IconButton,
Typography,
Card,
} from "@material-tailwind/react";
import { HeartIcon, ShareIcon } from "@heroicons/react/24/solid";
export default function Example() {
const [open, setOpen] = React.useState(false);
const [isFavorite, setIsFavorite] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
const handleIsFavorite = () => setIsFavorite((cur) => !cur);
return (
<React.Fragment>
<Card
className="h-64 w-96 cursor-pointer overflow-hidden transition-opacity hover:opacity-90"
onClick={handleOpen}
>
<img
alt="nature"
className="h-full w-full object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
/>
</Card>
<Dialog size="xl" open={open} handler={handleOpen}>
<DialogHeader className="justify-between">
<div className="flex items-center gap-3">
<Avatar
size="sm"
variant="circular"
alt="candice wu"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
<div className="-mt-px flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-medium"
>
Candice Wu
</Typography>
<Typography
variant="small"
color="gray"
className="text-xs font-normal"
>
@canwu
</Typography>
</div>
</div>
<div className="flex items-center gap-2">
<IconButton
variant="text"
size="sm"
color={isFavorite ? "red" : "blue-gray"}
onClick={handleIsFavorite}
>
<HeartIcon className="h-5 w-5" />
</IconButton>
<Button color="green" size="sm">
Free Download
</Button>
</div>
</DialogHeader>
<DialogBody divider={true} className="p-0">
<img
alt="nature"
className="h-[48rem] w-full object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
/>
</DialogBody>
<DialogFooter className="justify-between">
<div className="flex items-center gap-16">
<div>
<Typography variant="small" color="gray" className="font-normal">
Views
</Typography>
<Typography color="blue-gray" className="font-medium">
44,082,044
</Typography>
</div>
<div>
<Typography variant="small" color="gray" className="font-normal">
Downloads
</Typography>
<Typography color="blue-gray" className="font-medium">
553,031
</Typography>
</div>
</div>
<Button
size="sm"
variant="outlined"
color="blue-gray"
className="flex items-center gap-3"
>
<ShareIcon className="h-4 w-4" /> Share
</Button>
</DialogFooter>
</Dialog>
</React.Fragment>
);
}
Use the example below to create a Web 3.0 wallet connect dialog.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
IconButton,
Typography,
MenuItem,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
export default function Example() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
return (
<React.Fragment>
<Button onClick={handleOpen}>Connect Wallet</Button>
<Dialog size="xs" open={open} handler={handleOpen}>
<DialogHeader className="justify-between">
<Typography variant="h5" color="blue-gray">
Connect a Wallet
</Typography>
<IconButton
color="blue-gray"
size="sm"
variant="text"
onClick={handleOpen}
>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</DialogHeader>
<DialogBody className="overflow-y-scroll pr-2">
<div className="mb-6">
<Typography
variant="small"
color="gray"
className="font-semibold opacity-70"
>
Popular
</Typography>
<ul className="mt-1 -ml-2 flex flex-col gap-1">
<MenuItem className="flex items-center gap-3">
<img
src="/icons/metamask.svg"
alt="metamast"
className="h-6 w-6"
/>
<Typography color="blue-gray" variant="h6">
MetaMask
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-3">
<img
src="/icons/coinbase.svg"
alt="metamast"
className="h-6 w-6 rounded-md"
/>
<Typography color="blue-gray" variant="h6">
Coinbase Wallet
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-3">
<img
src="/icons/connect-wallet.svg"
alt="metamast"
className="h-6 w-6 rounded-md"
/>
<Typography color="blue-gray" variant="h6">
Connect Wallet
</Typography>
</MenuItem>
</ul>
</div>
<div>
<Typography
variant="small"
color="gray"
className="font-semibold opacity-70"
>
More
</Typography>
<ul className="mt-1 -ml-2.5 flex flex-col gap-1">
<MenuItem className="flex items-center gap-3">
<img
src="/icons/trust-wallet.svg"
alt="metamast"
className="h-7 w-7 rounded-md border border-blue-gray-50"
/>
<Typography color="blue-gray" variant="h6">
Trust Wallet
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-3">
<img
src="/icons/argent-wallet.svg"
alt="metamast"
className="h-7 w-7 rounded-md border border-blue-gray-50"
/>
<Typography color="blue-gray" variant="h6">
Coinbase Wallet
</Typography>
</MenuItem>
</ul>
</div>
</DialogBody>
<DialogFooter className="justify-between gap-2 border-t border-blue-gray-50">
<Typography variant="small" color="gray" className="font-normal">
New to Ethereum wallets?
</Typography>
<Button variant="text" size="sm">
Learn More
</Button>
</DialogFooter>
</Dialog>
</React.Fragment>
);
}
import { Fragment, useState } from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Typography,
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(!open);
return (
<Fragment>
<Button onClick={handleOpen}>
Long Dialog
</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>Long modal</DialogHeader>
<DialogBody divider className="h-[40rem] overflow-scroll">
<Typography className="font-normal">
I always felt like I could do anything. That's the main thing people are controlled
by! Thoughts- their perception of themselves! They're slowed down by their
perception of themselves. If you're taught you can't do anything, you
won't do anything. I was taught I could do everything. As we live, our hearts turn
colder. Cause pain is what we go through as we become older. We get insulted by others,
lose trust for those others. We get back stabbed by friends. It becomes harder for us to
give others a hand. We get our heart broken by people we love, even that we give them
all we have. Then we lose family over time. What else could rust the heart more over
time? Blackgold.
<br />
<br />
We're not always in the position that we want to be at. We're constantly
growing. We're constantly making mistakes. We're constantly trying to express
ourselves and actualize our dreams. If you have the opportunity to play this game of
life you need to appreciate every moment. A lot of people don't appreciate the
moment until it's passed.
<br /> <br />
There's nothing I really wanted to do in life that I wasn't able to get good
at. That's my skill. I'm not really specifically talented at anything except
for the ability to learn. That's what I do. That's what I'm here for.
Don't be afraid to be wrong because you can't learn anything from a
compliment.
<br /> <br />
It really matters and then like it really doesn't matter. What matters is the
people who are sparked by it. And the people who are like offended by it, it
doesn't matter. Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.
<br /> <br />
The time is now for it to be okay to be great. People in this world shun people for
being great. For being a bright color. For standing out. But the time is now to be okay
to be the greatest you. Would you believe in what you believe in, if you were the only
one who believed it?
</Typography>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="outlined" color="red" onClick={handleOpen}>
close
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
Save changes
</Button>
</DialogFooter>
</Dialog>
</Fragment>
);
}
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Input,
Textarea,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/solid";
export default function Example() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<React.Fragment>
<Button onClick={handleOpen}>
Message Dialog
</Button>
<Dialog open={open} handler={handleOpen}>
<div className="flex items-center justify-between">
<DialogHeader>New message to @</DialogHeader>
<XMarkIcon className="mr-3 h-5 w-5" onClick={handleOpen} />
</div>
<DialogBody divider>
<div className="grid gap-6">
<Input label="Username" />
<Textarea label="Message" />
</div>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="outlined" color="red" onClick={handleOpen}>
close
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
send message
</Button>
</DialogFooter>
</Dialog>
</React.Fragment>
);
}
import { Fragment, useState } from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Typography,
} from "@material-tailwind/react";
import { BellIcon } from "@heroicons/react/24/solid";
export default function Example() {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(!open);
return (
<Fragment>
<Button onClick={handleOpen}>
Notification
</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>
<Typography variant="h5" color="blue-gray">
Your Attention is Required!
</Typography>
</DialogHeader>
<DialogBody divider className="grid place-items-center gap-4">
<BellIcon className="h-16 w-16 text-red-500" />
<Typography color="red" variant="h4">
You should read this!
</Typography>
<Typography className="text-center font-normal">
A small river named Duden flows by their place and supplies it with the necessary
regelialia.
</Typography>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="text" color="blue-gray" onClick={handleOpen}>
close
</Button>
<Button variant="gradient" onClick={handleOpen}>
Ok, Got it
</Button>
</DialogFooter>
</Dialog>
</Fragment>
);
}