AlertDialog

Alert dialogs are a specific type of dialog, which display important information that users must acknowledge.

Example

Unlike the standard Dialog the AlertDialog is very deliberate, with the exception of children its layout is prescriptive.

  • Dialog — For generic dialog requirements.
  • Notice — For displaying non-modal messages to the user.

Props

Actions

The AlertDialog supports up to three buttons in its footer: a primary button, a secondary button, and a cancel button.

Labels

Each button can be rendered by providing a string to the primaryActionLabel, secondaryActionLabel, and cancelLabel respectively. Be sure to localize any strings provided to the AlertDialog and to the button labels as well.

Handlers

AlertDialog accepts an onPrimaryAction, onSecondaryAction and onCancel prop, triggered when the AlertDialog’s confirm or cancel buttons are pressed respectively.

Tone

Use the "critical" tone for destructive alert dialogs. Reserve destructive alerts for situations where a user needs to confirm an action that will impact their data in a destructive way.

Title

Alert dialogs must have a visible title, required by passing a string as the title prop. The title string should be localised.

Focus

Using the autoFocusButton prop you can spcify which button, if any, should be focused when the dialog opens.

© 2025 @jossmac