Dialog
The Dialog component is an overlay window displayed on top of the primary window or another dialog, rendering the content underneath inactive. It ensures focused user interaction by preventing distractions from the underlying content, making it ideal for important messages or actions requiring user attention.
Additional Examples
With Custom Close Button
With Context Menu or Dropdown Menu
To activate the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or
Dropdown Menu component in the Dialog component.
<Dialog>
<ContextMenu>
<ContextMenuTrigger>Right click</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Open</ContextMenuItem>
<ContextMenuItem>Download</ContextMenuItem>
<DialogTrigger asChild>
<ContextMenuItem>
<span>Delete</span>
</ContextMenuItem>
</DialogTrigger>
</ContextMenuContent>
</ContextMenu>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to permanently
delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>Configurable Props
<Dialog>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultOpen | boolean | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. | |
open | boolean | The controlled open state of the dialog. Must be used in conjunction with onOpenChange. | |
onOpenChange | function (open: boolean) => void | Event handler called when the open state of the dialog changes. | |
modal | boolean | true | The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. |
<DialogContent>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
onOpenAutoFocus | function (event: Event) => void | Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. | |
onCloseAutoFocus | function (event: Event) => void | Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault. | |
onEscapeKeyDown | function (event: KeyboardEvent) => void | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault | |
onPointerDownOutside | function (event: PointerDownOutsideEvent) => void | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault. | |
onInteractOutside | function (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault. |