Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Installation

›pnpm dlx shadcn@latest add @evolphin/dialog

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Type Definitions

interface DialogProps {
  /** The controlled open state of the dialog */
  open?: boolean;  
DialogProps.open?: boolean | undefined
The controlled open state of the dialog
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
  /** The modality of the dialog */
  ?: boolean;
}

Examples

Default

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the dialog.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`modal`	`boolean`	`true`	The modality of the dialog.

DialogTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

DialogContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Used to force mounting when more control is needed.
`onOpenAutoFocus`	`(event: Event) => void`	-	Event handler called when focus moves into the component after opening.
`onCloseAutoFocus`	`(event: Event) => void`	-	Event handler called when focus moves to the trigger after closing.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Event handler called when the escape key is down.
`showCloseButton`	`boolean`	`true`	Whether to show the close button.

Search

Dialog

On this page