Homecomponentsstructural

AlertDialog

A modal dialog with important content that expects a response.

Use AlertDialog to ask user's confirmation on important actions. It requires a title, description, and a primary action.

Opening the dialog

There are two ways to open the dialog. The first one is to use a trigger element which will be rendered and will trigger the dialog when tapped upon.

Open in Playroom

The other way is to use state to show or hide the dialog. This requires using open and onChange.

Open in Playroom

Prefer to use trigger whenever the dialog is opened by an interface element. This provides an accessibility affordance of returning the focus back to the trigger after the dialog is dismissed.

Size

Use the size property to control size of the alert dialog.

Open in Playroom

Customizing the secondary action

You can use the secondaryAction property to set a custom secondary action.

Open in Playroom

API

title
Required
The title of the alert dialog.
string
description
Required
The description of the dialog.
string
primaryAction
Required
The details about primary action.
AlertDialogAction
open
Used to show the dialog. Use with onChange.
true
false
onChange
Callback fired when the component requests to be closed.
((open: boolean) => void)
onClose
The action to perform when dialog is closed.
(() => void)
trigger
An optional trigger that opens the alert.
ReactNode
secondaryAction
An optional secondary action. Defaults to "Cancel."
AlertDialogSecondaryAction
size
The size of the alert dialog.
small
medium
large
Table of Contents
Opening the dialog
Size
Customizing the secondary action
API