Alert Dialog

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

When To Use

Use alert dialogs to interrupt the user flow with a message that requires their attention and acknowledgment. They're useful for:

Confirming destructive actions (like deleting data)
Requiring explicit user confirmation
Warning users about consequences of an action
Presenting critical information that needs acknowledgment
Requiring a choice before proceeding

Unlike regular dialogs, alert dialogs are more disruptive and should be used sparingly for truly important interactions.

Examples

Basic#

Destructive Action#

Custom Buttons#

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`	-

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

Alert

Displays a callout for user attention.

Aspect Ratio

Maintains a consistent width-to-height ratio for elements.