Alert Dialog

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

Features

  • Focus is automatically trapped.
  • Can be controlled or uncontrolled.
  • Manages screen reader announcements with `Title` and `Description` components.
  • Esc closes the component automatically.

Install the component from your command line.

Import the components and piece the parts together.

Create your styled alert dialog component from the primitive parts.

Contains all the parts of an alert dialog.

PropTypeDefaultRequired
defaultOpenbooleanNo default valueNot required
openbooleanNo default valueNot required
onOpenChangefunctionNo default valueNot required
idstringNo default valueNot required

A button that opens the dialog.

PropTypeDefaultRequired
asenumbuttonNot required

A layer that covers the inert portion of the view when the dialog is open.

PropTypeDefaultRequired
asenumdivNot required
forceMountbooleanNo default valueNot required

Contains content to be rendered when the dialog is open.

PropTypeDefaultRequired
asenumdivNot required
forceMountbooleanNo default valueNot required
onOpenAutoFocusfunctionNo default valueNot required
onCloseAutoFocusfunctionNo default valueNot required
onEscapeKeyDownfunctionNo default valueNot required
onPointerDownOutsidefunctionNo default valueNot required

A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.

PropTypeDefaultRequired
asenumbuttonNot required

A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.

PropTypeDefaultRequired
asenumbuttonNot required

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.

PropTypeDefaultRequired
asenumh2Not required

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.

PropTypeDefaultRequired
asenumpNot required

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the dialog.
EnterOpens/closes the dialog.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the dialog and moves focus to AlertDialog.Trigger.