Dialog

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

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

Prop	Type	Default
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

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.