Dialog

A window overlaid on the primary window that interrupts the user with important content.

Radix UI Dialog

When To Use

Use the Dialog component when you need to:

Display critical information that requires user attention
Collect user input through forms
Present detailed information without navigating away from the current page
Confirm user actions, especially destructive ones
Focus user attention on a specific task or content
Show additional options or settings

Dialogs help focus the user's attention on a specific task while maintaining context with the underlying page.

Examples

Basic#

Form#

Custom#

Scrollable#

Props

Dialog

Prop	Type	Default
`modal?`	`boolean`	-
`onOpenChange?`	`((open: boolean) => void)`	-
`defaultOpen?`	`boolean`	-
`open?`	`boolean`	-

DialogTrigger

Prop	Type	Default
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

DialogContent

Prop	Type	Default
`forceMount?`	`true`	-
`onCloseAutoFocus?`	`((event: Event) => void)`	-
`onOpenAutoFocus?`	`((event: Event) => void)`	-
`onInteractOutside?`	`((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void)`	-
`onFocusOutside?`	`((event: FocusOutsideEvent) => void)`	-
`onPointerDownOutside?`	`((event: PointerDownOutsideEvent) => void)`	-
`onEscapeKeyDown?`	`((event: KeyboardEvent) => void)`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

DialogHeader

Prop	Type	Default

DialogFooter

Prop	Type	Default

DialogTitle

Prop	Type	Default
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

DialogDescription

Prop	Type	Default
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

DialogClose

Prop	Type	Default
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

Context Menu

A right-click menu that displays a list of actions or options.

Drawer

A panel that slides in from the edge of the screen.