We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out
Tailwind CSS Modal - React
Use our React and Tailwind CSS Modal component to inform users about a task or important information that require decisions, or involves multiple tasks.
A modal 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 Modal component examples that you can use for your Tailwind CSS and React project.
Modal Demo
Here's how to implement a simple and responsive Modal component. It can be used to inform users about a task or important information that require decisions, or involves multiple tasks in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
Loading...
1import {
2 Dialog,
3 Button,
4 Typography,
5 IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DialogDemo() {
10 return (
11 <Dialog>
12 <Dialog.Trigger as={Button}>Open</Dialog.Trigger>
13 <Dialog.Overlay>
14 <Dialog.Content>
15 <div className="flex items-center justify-between gap-4">
16 <Typography type="h6">Material Tailwind</Typography>
17 <Dialog.DismissTrigger
18 as={IconButton}
19 size="sm"
20 variant="ghost"
21 color="secondary"
22 className="absolute right-2 top-2"
23 isCircular
24 >
25 <Xmark className="h-5 w-5" />
26 </Dialog.DismissTrigger>
27 </div>
28 <Typography className="mb-6 mt-2 text-foreground">
29 Material Tailwind is an open-source library that uses the power of
30 Tailwind CSS and React to help you build unique web projects faster
31 and easier. The stunning design inspired by Material Design is a
32 bonus! Get Material Tailwind and take advantage of its free
33 components and features that will help you set up your web project
34 quickly.
35 </Typography>
36 <div className="mb-1 flex items-center justify-end gap-2">
37 <Dialog.DismissTrigger as={Button} variant="ghost" color="error">
38 Cancel
39 </Dialog.DismissTrigger>
40 <Button>Get Started</Button>
41 </div>
42 </Dialog.Content>
43 </Dialog.Overlay>
44 </Dialog>
45 );
46}
47Modal Sizes
We provide different modal sizes like xs, sm, md, lg, xl and screen so you can adapt it easily to your needs. You can simply use the size prop to change the modal size.
In the example below, we've showcased the different modal sizes that you can use in your project. In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import {
2 Dialog,
3 Button,
4 Typography,
5 IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DialogSizes() {
10 return (
11 <>
12 <div className="flex items-center justify-center gap-2">
13 <Dialog size="xs">
14 <Dialog.Trigger as={Button}>Open XS</Dialog.Trigger>
15 <Dialog.Overlay>
16 <Dialog.Content>
17 <Dialog.DismissTrigger
18 as={IconButton}
19 size="sm"
20 variant="ghost"
21 color="secondary"
22 className="absolute right-2 top-2"
23 isCircular
24 >
25 <Xmark className="h-5 w-5" />
26 </Dialog.DismissTrigger>
27 <Typography type="h6">Material Tailwind</Typography>
28 <Typography className="mb-6 mt-2 text-foreground">
29 Material Tailwind is an open-source library that uses the power
30 of Tailwind CSS and React to help you build unique web projects
31 faster and easier. The stunning design inspired by Material
32 Design is a bonus! Get Material Tailwind and take advantage of
33 its free components and features that will help you set up your
34 web project quickly.
35 </Typography>
36 <div className="mb-1 flex items-center justify-end gap-2">
37 <Dialog.DismissTrigger
38 as={Button}
39 variant="ghost"
40 color="error"
41 >
42 Cancel
43 </Dialog.DismissTrigger>
44 <Button>Get Started</Button>
45 </div>
46 </Dialog.Content>
47 </Dialog.Overlay>
48 </Dialog>
49 <Dialog size="sm">
50 <Dialog.Trigger as={Button}>Open SM</Dialog.Trigger>
51 <Dialog.Overlay>
52 <Dialog.Content>
53 <div className="flex items-center justify-between gap-4">
54 <Typography type="h6">Material Tailwind</Typography>
55 <Dialog.DismissTrigger
56 as={IconButton}
57 size="sm"
58 variant="ghost"
59 isCircular
60 color="secondary"
61 className="absolute right-2 top-2"
62 >
63 <Xmark className="h-5 w-5" />
64 </Dialog.DismissTrigger>
65 </div>
66 <Typography className="mb-6 mt-2 text-foreground">
67 Material Tailwind is an open-source library that uses the power
68 of Tailwind CSS and React to help you build unique web projects
69 faster and easier. The stunning design inspired by Material
70 Design is a bonus! Get Material Tailwind and take advantage of
71 its free components and features that will help you set up your
72 web project quickly.
73 </Typography>
74 <div className="mb-1 flex items-center justify-end gap-2">
75 <Dialog.DismissTrigger
76 as={Button}
77 variant="ghost"
78 color="error"
79 >
80 Cancel
81 </Dialog.DismissTrigger>
82 <Button>Get Started</Button>
83 </div>
84 </Dialog.Content>
85 </Dialog.Overlay>
86 </Dialog>
87 <Dialog size="md">
88 <Dialog.Trigger as={Button}>Open MD</Dialog.Trigger>
89 <Dialog.Overlay>
90 <Dialog.Content>
91 <div className="flex items-center justify-between gap-4">
92 <Typography type="h6">Material Tailwind</Typography>
93 <Dialog.DismissTrigger
94 as={IconButton}
95 size="sm"
96 variant="ghost"
97 isCircular
98 color="secondary"
99 className="absolute right-2 top-2"
100 >
101 <Xmark className="h-5 w-5" />
102 </Dialog.DismissTrigger>
103 </div>
104 <Typography className="mb-6 mt-2 text-foreground">
105 Material Tailwind is an open-source library that uses the power
106 of Tailwind CSS and React to help you build unique web projects
107 faster and easier. The stunning design inspired by Material
108 Design is a bonus! Get Material Tailwind and take advantage of
109 its free components and features that will help you set up your
110 web project quickly.
111 </Typography>
112 <div className="mb-1 flex items-center justify-end gap-2">
113 <Dialog.DismissTrigger
114 as={Button}
115 variant="ghost"
116 color="error"
117 >
118 Cancel
119 </Dialog.DismissTrigger>
120 <Button>Get Started</Button>
121 </div>
122 </Dialog.Content>
123 </Dialog.Overlay>
124 </Dialog>
125 </div>
126 <div className="flex items-center justify-center gap-2">
127 <Dialog size="lg">
128 <Dialog.Trigger as={Button}>Open LG</Dialog.Trigger>
129 <Dialog.Overlay>
130 <Dialog.Content>
131 <div className="flex items-center justify-between gap-4">
132 <Typography type="h6">Material Tailwind</Typography>
133 <Dialog.DismissTrigger
134 as={IconButton}
135 size="sm"
136 variant="ghost"
137 isCircular
138 color="secondary"
139 className="absolute right-2 top-2"
140 >
141 <Xmark className="h-5 w-5" />
142 </Dialog.DismissTrigger>
143 </div>
144 <Typography className="mb-6 mt-2 text-foreground">
145 Material Tailwind is an open-source library that uses the power
146 of Tailwind CSS and React to help you build unique web projects
147 faster and easier. The stunning design inspired by Material
148 Design is a bonus! Get Material Tailwind and take advantage of
149 its free components and features that will help you set up your
150 web project quickly.
151 </Typography>
152 <div className="mb-1 flex items-center justify-end gap-2">
153 <Dialog.DismissTrigger
154 as={Button}
155 variant="ghost"
156 color="error"
157 >
158 Cancel
159 </Dialog.DismissTrigger>
160 <Button>Get Started</Button>
161 </div>
162 </Dialog.Content>
163 </Dialog.Overlay>
164 </Dialog>
165 <Dialog size="xl">
166 <Dialog.Trigger as={Button}>Open XL</Dialog.Trigger>
167 <Dialog.Overlay>
168 <Dialog.Content>
169 <div className="flex items-center justify-between gap-4">
170 <Typography type="h6">Material Tailwind</Typography>
171 <Dialog.DismissTrigger
172 as={IconButton}
173 size="sm"
174 variant="ghost"
175 isCircular
176 color="secondary"
177 className="absolute right-2 top-2"
178 >
179 <Xmark className="h-5 w-5" />
180 </Dialog.DismissTrigger>
181 </div>
182 <Typography className="mb-6 mt-2 text-foreground">
183 Material Tailwind is an open-source library that uses the power
184 of Tailwind CSS and React to help you build unique web projects
185 faster and easier. The stunning design inspired by Material
186 Design is a bonus! Get Material Tailwind and take advantage of
187 its free components and features that will help you set up your
188 web project quickly.
189 </Typography>
190 <div className="mb-1 flex items-center justify-end gap-2">
191 <Dialog.DismissTrigger
192 as={Button}
193 variant="ghost"
194 color="error"
195 >
196 Cancel
197 </Dialog.DismissTrigger>
198 <Button>Get Started</Button>
199 </div>
200 </Dialog.Content>
201 </Dialog.Overlay>
202 </Dialog>
203 <Dialog size="screen">
204 <Dialog.Trigger as={Button}>Open Screen</Dialog.Trigger>
205 <Dialog.Overlay>
206 <Dialog.Content>
207 <div className="flex items-center justify-between gap-4">
208 <Typography type="h6">Material Tailwind</Typography>
209 <Dialog.DismissTrigger
210 as={IconButton}
211 size="sm"
212 variant="ghost"
213 isCircular
214 color="secondary"
215 className="absolute right-2 top-2"
216 >
217 <Xmark className="h-5 w-5" />
218 </Dialog.DismissTrigger>
219 </div>
220 <Typography className="mb-6 mt-2 text-foreground">
221 Material Tailwind is an open-source library that uses the power
222 of Tailwind CSS and React to help you build unique web projects
223 faster and easier. The stunning design inspired by Material
224 Design is a bonus! Get Material Tailwind and take advantage of
225 its free components and features that will help you set up your
226 web project quickly.
227 </Typography>
228 <div className="mb-1 flex items-center justify-end gap-2">
229 <Dialog.DismissTrigger
230 as={Button}
231 variant="ghost"
232 color="error"
233 >
234 Cancel
235 </Dialog.DismissTrigger>
236 <Button>Get Started</Button>
237 </div>
238 </Dialog.Content>
239 </Dialog.Overlay>
240 </Dialog>
241 </div>
242 </>
243 );
244}
245Modal with Form
Use this example to create a modal with a authentication form. You can use this modal to create a login or sign up form in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
Loading...
1import {
2 Dialog,
3 Button,
4 Input,
5 Checkbox,
6 Typography,
7 IconButton,
8} from "@material-tailwind/react";
9import { Xmark } from "iconoir-react";
10
11export default function DialogWithForm() {
12 return (
13 <Dialog size="sm">
14 <Dialog.Trigger as={Button}>Sign In</Dialog.Trigger>
15 <Dialog.Overlay>
16 <Dialog.Content>
17 <Dialog.DismissTrigger
18 as={IconButton}
19 size="sm"
20 variant="ghost"
21 color="secondary"
22 className="absolute right-2 top-2"
23 isCircular
24 >
25 <Xmark className="h-5 w-5" />
26 </Dialog.DismissTrigger>
27 <Typography type="h6" className="mb-1">
28 Sign In
29 </Typography>
30 <Typography className="text-foreground">
31 Enter your email and password to Sign In.
32 </Typography>
33 <form action="#" className="mt-6">
34 <div className="mb-4 mt-2 space-y-1.5">
35 <Typography
36 as="label"
37 htmlFor="email"
38 type="small"
39 color="default"
40 className="font-semibold"
41 >
42 Email
43 </Typography>
44 <Input
45 id="email"
46 type="email"
47 placeholder="someone@example.com"
48 />
49 </div>
50 <div className="mb-4 space-y-1.5">
51 <Typography
52 as="label"
53 htmlFor="password"
54 type="small"
55 color="default"
56 className="font-semibold"
57 >
58 Password
59 </Typography>
60 <Input id="password" type="password" placeholder="************" />
61 </div>
62 <div className="mb-4 flex items-center gap-2">
63 <Checkbox id="checkbox">
64 <Checkbox.Indicator />
65 </Checkbox>
66 <Typography
67 as="label"
68 htmlFor="checkbox"
69 className="text-foreground"
70 >
71 Remember Me
72 </Typography>
73 </div>
74 <Button isFullWidth>Sign In</Button>
75 </form>
76 <Typography
77 type="small"
78 className="mb-2 mt-3 flex items-center justify-center gap-1 text-foreground"
79 >
80 Don't have an account?
81 <Typography
82 type="small"
83 color="primary"
84 as="a"
85 href="#"
86 className="font-semibold"
87 >
88 Sign up
89 </Typography>
90 </Typography>
91 </Dialog.Content>
92 </Dialog.Overlay>
93 </Dialog>
94 );
95}
96Modal with Image
Use this example to create a modal with image and some action inspired by Unsplash. You can use this modal to show a preview of an image and some actions like download or share.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import {
2 Dialog,
3 Button,
4 Avatar,
5 Typography,
6 IconButton,
7} from "@material-tailwind/react";
8import { Heart, ShareIos } from "iconoir-react";
9
10export default function DialogWithImage() {
11 return (
12 <Dialog size="xl">
13 <Dialog.Trigger>
14 <img
15 alt="nature"
16 src="https://dub.sh/xxo2Jek"
17 className="h-64 w-auto rounded-lg object-cover object-center"
18 />
19 </Dialog.Trigger>
20 <Dialog.Overlay>
21 <Dialog.Content>
22 <div className="flex items-center justify-between">
23 <div className="flex items-center gap-3">
24 <Avatar
25 size="md"
26 alt="Andrew Alexa"
27 src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind/team-1.jpg"
28 />
29 <div className="flex flex-col">
30 <Typography className="font-semibold">Andrew Alexa</Typography>
31 <Typography type="small" className="text-foreground">
32 @alexandrew
33 </Typography>
34 </div>
35 </div>
36 <div className="flex items-center gap-2">
37 <IconButton size="sm" color="error" variant="ghost">
38 <Heart className="h-4 w-4" />
39 </IconButton>
40 <Button size="sm">Free Download</Button>
41 </div>
42 </div>
43 <div className="my-4">
44 <img
45 alt="nature"
46 src="https://dub.sh/xxo2Jek"
47 className="h-[48rem] w-full rounded-lg object-cover object-center"
48 />
49 </div>
50 <div className="flex items-end justify-between">
51 <div className="flex items-center gap-16">
52 <div>
53 <Typography type="small" className="text-foreground">
54 Views
55 </Typography>
56 <Typography className="font-semibold">44,082,044</Typography>
57 </div>
58 <div>
59 <Typography type="small" className="text-foreground">
60 Downloads
61 </Typography>
62 <Typography className="font-semibold">553,031</Typography>
63 </div>
64 </div>
65 <Button size="sm" variant="ghost">
66 <ShareIos className="mr-1.5 h-4 w-4" /> Share
67 </Button>
68 </div>
69 </Dialog.Content>
70 </Dialog.Overlay>
71 </Dialog>
72 );
73}
74Web 3 Modal
Use this example to create a modal with Web 3 wallet connection. You can use this modal to provide a way for users to connect their Web 3 wallet to your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import {
2 Dialog,
3 Button,
4 Typography,
5 IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DialogWeb3() {
10 return (
11 <Dialog size="sm">
12 <Dialog.Trigger as={Button}>Connect Wallet</Dialog.Trigger>
13 <Dialog.Overlay>
14 <Dialog.Content className="pb-4">
15 <Dialog.DismissTrigger
16 as={IconButton}
17 size="sm"
18 variant="ghost"
19 color="secondary"
20 isCircular
21 className="absolute right-2 top-2"
22 >
23 <Xmark className="h-5 w-5" />
24 </Dialog.DismissTrigger>
25 <Typography type="h6">Connect a Wallet</Typography>
26 <Typography className="text-foreground">
27 Choose which card you want to connect
28 </Typography>
29 <div className="mt-4">
30 <Typography color="default" className="mb-2 font-semibold">
31 Popular
32 </Typography>
33 <div className="space-y-2">
34 <Button
35 isFullWidth
36 color="secondary"
37 className="flex items-center justify-center gap-2"
38 >
39 <img
40 alt="metamask"
41 src="https://docs.material-tailwind.com/icons/metamask.svg"
42 className="h-5 w-5"
43 />
44 <Typography className="font-semibold">
45 Connect with MetaMask
46 </Typography>
47 </Button>
48 <Button
49 isFullWidth
50 color="secondary"
51 className="flex items-center justify-center gap-2"
52 >
53 <img
54 alt="metamast"
55 src="https://docs.material-tailwind.com/icons/coinbase.svg"
56 className="h-6 w-6 rounded"
57 />
58 <Typography className="font-semibold">
59 Connect with Coinbase
60 </Typography>
61 </Button>
62 </div>
63
64 <Typography color="default" className="mb-2 mt-6 font-semibold">
65 Other
66 </Typography>
67 <Button
68 isFullWidth
69 color="secondary"
70 className="flex items-center justify-center gap-2"
71 >
72 <img
73 alt="metamast"
74 src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
75 className="h-6 w-6 rounded"
76 />
77 <Typography className="font-semibold">
78 Connect with Trust Wallet
79 </Typography>
80 </Button>
81 </div>
82 <div className="mt-12 flex w-full items-center justify-between gap-2">
83 <Typography type="small" className="text-foreground">
84 New to Ethereum wallets?
85 </Typography>
86 <Button variant="outline" color="secondary" size="sm">
87 Learn More
88 </Button>
89 </div>
90 </Dialog.Content>
91 </Dialog.Overlay>
92 </Dialog>
93 );
94}
95Long Modal
Use this example to create a scrollable modal with long content. You can use this modal to show a long text or content that requires scrolling.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import {
2 Dialog,
3 Button,
4 Typography,
5 IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DialogLong() {
10 return (
11 <Dialog>
12 <Dialog.Trigger as={Button}>Long Dialog</Dialog.Trigger>
13 <Dialog.Overlay>
14 <Dialog.Content>
15 <div className="mb-4 flex items-center justify-between gap-4">
16 <Typography type="h6">Long Dialog</Typography>
17 <Dialog.DismissTrigger
18 as={IconButton}
19 size="sm"
20 variant="ghost"
21 color="secondary"
22 isCircular
23 className="absolute right-2 top-2"
24 >
25 <Xmark className="h-5 w-5" />
26 </Dialog.DismissTrigger>
27 </div>
28 <div className="overflow-y-auto">
29 <Typography className="h-[80vh]">
30 I've always had unwavering confidence in my abilities, and I
31 believe our thoughts and self-perception are the primary forces
32 that shape us. Many people limit themselves by their own
33 self-doubt, slowing their progress. Fortunately, I was raised with
34 the belief that I could achieve anything.
35 <br />
36 <br />
37 As we journey through life, we often encounter challenges that
38 harden our hearts. Pain, insults, broken trust, and betrayal can
39 make us hesitant to help others. Love can lead to heartbreak, and
40 time can distance us from family. These experiences can gradually
41 erode our optimism.
42 <br />
43 <br />
44 Life doesn't always place us where we want to be. We grow,
45 make mistakes, and strive to express ourselves and fulfill our
46 dreams. If we're fortunate enough to participate in
47 life's journey, we should cherish every moment. Regrettably,
48 some only recognize the value of a moment after it's passed.
49 <br />
50 <br />
51 One thing I've learned is that I can excel at anything I set
52 my mind to. My skill is my ability to learn. I'm here to
53 learn, to grow, and to inspire others to do the same. Don't
54 fear making mistakes; they teach us far more than compliments ever
55 will. Ultimately, what truly matters is how our actions inspire
56 and motivate others. Some will be ignited by our endeavors, while
57 others may be offended—it's all part of the process. I'm here
58 to pursue my dreams and encourage others to do the same.
59 <br />
60 <br />
61 Now is the time to embrace greatness without fear of judgment.
62 Some may resent those who shine brightly or stand out, but
63 it's time to be the best version of ourselves. Do you have
64 faith in your beliefs, even if you're the only one who does?
65 <br />
66 <br />
67 As we journey through life, we often encounter challenges that
68 harden our hearts. Pain, insults, broken trust, and betrayal can
69 make us hesitant to help others. Love can lead to heartbreak, and
70 time can distance us from family. These experiences can gradually
71 erode our optimism.
72 <br />
73 <br />
74 Life doesn't always place us where we want to be. We grow,
75 make mistakes, and strive to express ourselves and fulfill our
76 dreams. If we're fortunate enough to participate in
77 life's journey, we should cherish every moment. Regrettably,
78 some only recognize the value of a moment after it's passed.
79 <br />
80 <br />
81 One thing I've learned is that I can excel at anything I set
82 my mind to. My skill is my ability to learn. I'm here to
83 learn, to grow, and to inspire others to do the same. Don't
84 fear making mistakes; they teach us far more than compliments ever
85 will. Ultimately, what truly matters is how our actions inspire
86 and motivate others. Some will be ignited by our endeavors, while
87 others may be offended—it's all part of the process. I'm here
88 to pursue my dreams and encourage others to do the same.
89 <br />
90 <br />
91 Now is the time to embrace greatness without fear of judgment.
92 Some may resent those who shine brightly or stand out, but
93 it's time to be the best version of ourselves. Do you have
94 faith in your beliefs, even if you're the only one who does?
95 As we journey through life, we often encounter challenges that
96 harden our hearts. Pain, insults, broken trust, and betrayal can
97 make us hesitant to help others. Love can lead to heartbreak, and
98 time can distance us from family. These experiences can gradually
99 erode our optimism.
100 <br />
101 <br />
102 Life doesn't always place us where we want to be. We grow,
103 make mistakes, and strive to express ourselves and fulfill our
104 dreams. If we're fortunate enough to participate in
105 life's journey, we should cherish every moment. Regrettably,
106 some only recognize the value of a moment after it's passed.
107 <br />
108 <br />
109 One thing I've learned is that I can excel at anything I set
110 my mind to. My skill is my ability to learn. I'm here to
111 learn, to grow, and to inspire others to do the same. Don't
112 fear making mistakes; they teach us far more than compliments ever
113 will. Ultimately, what truly matters is how our actions inspire
114 and motivate others. Some will be ignited by our endeavors, while
115 others may be offended—it's all part of the process. I'm here
116 to pursue my dreams and encourage others to do the same.
117 <br />
118 <br />
119 Now is the time to embrace greatness without fear of judgment.
120 Some may resent those who shine brightly or stand out, but
121 it's time to be the best version of ourselves. Do you have
122 faith in your beliefs, even if you're the only one who does?
123 </Typography>
124 </div>
125 <div className="mb-1 flex items-center justify-end gap-2 pt-4">
126 <Dialog.DismissTrigger as={Button} variant="ghost" color="error">
127 Cancel
128 </Dialog.DismissTrigger>
129 <Button color="success">Confirm</Button>
130 </div>
131 </Dialog.Content>
132 </Dialog.Overlay>
133 </Dialog>
134 );
135}
136Message Modal
Use this example to create a modal with a message form. You can use this modal to create a message form for writing a messsage or comment in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import {
2 Dialog,
3 Button,
4 Input,
5 Typography,
6 IconButton,
7 Textarea,
8} from "@material-tailwind/react";
9import { Xmark } from "iconoir-react";
10
11export default function DialogMessage() {
12 return (
13 <Dialog size="sm">
14 <Dialog.Trigger as={Button}>Open Message</Dialog.Trigger>
15 <Dialog.Overlay>
16 <Dialog.Content>
17 <Dialog.DismissTrigger
18 as={IconButton}
19 size="sm"
20 variant="ghost"
21 isCircular
22 color="secondary"
23 className="absolute right-2 top-2"
24 >
25 <Xmark className="h-5 w-5" />
26 </Dialog.DismissTrigger>
27 <Typography type="h6" className="mb-1">
28 New message to @{" "}
29 </Typography>
30 <Typography className="text-foreground">
31 Write the message and then click button.
32 </Typography>
33 <form action="#" className="mt-6">
34 <div className="mb-4 mt-2 space-y-1.5">
35 <Typography
36 as="label"
37 htmlFor="username"
38 type="small"
39 color="default"
40 className="font-semibold"
41 >
42 Username
43 </Typography>
44 <Input
45 id="username"
46 type="text"
47 placeholder="Username"
48 isFullWidth
49 />
50 </div>
51 <div className="w-full space-y-1.5">
52 <Typography
53 as="label"
54 htmlFor="message"
55 type="small"
56 color="default"
57 className="font-medium"
58 >
59 Message
60 </Typography>
61 <Textarea id="message" placeholder="Your message..." />
62 </div>
63
64 <div className="mt-4 flex justify-end gap-2">
65 <Dialog.DismissTrigger as={Button} color="secondary">
66 Cancel
67 </Dialog.DismissTrigger>
68 <Button>Send Message</Button>
69 </div>
70 </form>
71 </Dialog.Content>
72 </Dialog.Overlay>
73 </Dialog>
74 );
75}
76Modal Notification
Use this example to create a modal with a notification. You can use this modal to show a notification message to the user that requires their attention.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
1import { Dialog, Button, Typography } from "@material-tailwind/react";
2import { AppNotification } from "iconoir-react";
3
4export default function DialogNotification() {
5 return (
6 <Dialog size="sm">
7 <Dialog.Trigger as={Button}>Open Notification</Dialog.Trigger>
8 <Dialog.Overlay>
9 <Dialog.Content className="p-8">
10 <Typography type="h6" className="text-center">
11 Your Attention is Required!
12 </Typography>
13 <Typography className="text-center text-foreground">
14 Choose which card you want to connect
15 </Typography>
16 <div className="mt-12 flex flex-col items-center text-center">
17 <AppNotification className="mb-6 h-24 w-24" />
18 <Typography type="h6">You should read this!</Typography>
19 <Typography className="mt-2 text-center text-foreground">
20 Many people limit themselves by their own self-doubt, slowing
21 their progress. Fortunately, I was raised with the belief that I
22 could achieve anything.
23 </Typography>
24 </div>
25 <div className="mb-1 mt-8 flex items-center justify-center gap-2">
26 <Dialog.DismissTrigger as={Button} variant="ghost" color="error">
27 Cancel
28 </Dialog.DismissTrigger>
29 <Button>Got it</Button>
30 </div>
31 </Dialog.Content>
32 </Dialog.Overlay>
33 </Dialog>
34 );
35}
36