Dialog

A modal dialog that interrupts the user with important content and expects a response.

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5
6export function Default() {
7  return (
8    <Dialog>
9      <Dialog.Trigger asChild>
10        <Button>Open Dialog</Button>
11      </Dialog.Trigger>
12      <Dialog.Content>
13        <Dialog.Header>
14          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
15          <Dialog.Description>
16            This action cannot be undone. This will permanently delete your account and remove your
17            data from our servers.
18          </Dialog.Description>
19        </Dialog.Header>
20        <Dialog.Footer>
21          <Dialog.Close asChild>
22            <Button variant="outline">Cancel</Button>
23          </Dialog.Close>
24          <Dialog.Close asChild>
25            <Button variant="destructive">Delete Account</Button>
26          </Dialog.Close>
27        </Dialog.Footer>
28      </Dialog.Content>
29    </Dialog>
30  );
31}

Installation

pnpm dlx mateui add dialog

Anatomy

1import { Dialog } from '@/components/ui/dialog';

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button>Open Dialog</Button>
4  </Dialog.Trigger>
5  <Dialog.Content>
6    <Dialog.Header>
7      <Dialog.Title>Are you absolutely sure?</Dialog.Title>
8      <Dialog.Description>This action cannot be undone.</Dialog.Description>
9    </Dialog.Header>
10    <Dialog.Footer>
11      <Dialog.Close asChild>
12        <Button variant="outline">Cancel</Button>
13      </Dialog.Close>
14      <Button>Confirm</Button>
15    </Dialog.Footer>
16  </Dialog.Content>
17</Dialog>

Variants

Alert

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5
6export function Alert() {
7  return (
8    <Dialog>
9      <Dialog.Trigger asChild>
10        <Button variant="destructive">Delete Account</Button>
11      </Dialog.Trigger>
12      <Dialog.Content>
13        <Dialog.Header>
14          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
15          <Dialog.Description>
16            This action cannot be undone. This will permanently delete your account and remove your
17            data from our servers.
18          </Dialog.Description>
19        </Dialog.Header>
20        <Dialog.Footer>
21          <Dialog.Close asChild>
22            <Button variant="outline">Cancel</Button>
23          </Dialog.Close>
24          <Dialog.Close asChild>
25            <Button variant="destructive">Yes, delete account</Button>
26          </Dialog.Close>
27        </Dialog.Footer>
28      </Dialog.Content>
29    </Dialog>
30  );
31}

API Reference

Dialog

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes

Dialog.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element
`className`	`string`	-	Additional CSS classes

Dialog.Content

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Dialog content

Dialog.Header

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Dialog.Title

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Dialog.Description

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Dialog.Footer

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Dialog.Close

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element
`className`	`string`	-	Additional CSS classes

PreviousCollapsible NextDrawer