React Reference > AlertDialog Component

<AlertDialog />

Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform.

Usage 

<AlertDialog isOpen={this.state.isOpen} onCancel={this.handleCancel.bind(this)} cancelable>
     <div className="alert-dialog-title">Warning!</div>
     <div className="alert-dialog-content">
       An error has occurred!
     </div>
     <div className="alert-dialog-footer">
       <Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
         Cancel
       </Button>
       <Button onClick={this.handleCancel.bind(this)} className="alert-dialog-button">
         Ok
       </Button>
     </div>
   </AlertDialog>

Props

[improve this]
Name Type Description
visible bool Indicates whether the dialog is open and shown. Optional.
disabled bool Specifies whether the dialog is disabled. Optional.
cancelable bool

Specifies whether the dialog is cancelable or not. A cancelable dialog will call onDialogCancel when tapping the background or pressing the back button on Android devices.

Optional.
onDialogCancel func Called only if cancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. Optional.
onCancel func DEPRECATED! Use onDialogCancel instead. Optional.
isOpen bool DEPRECATED! Use visible instead. Optional.
isCancelable bool DEPRECATED! Use cancelable instead. Optional.
isDisabled bool DEPRECATED! Use disabled instead. Optional.
animation string The animation used when showing and hiding the dialog. Can be either "none" or "default". Optional.
modifier string The appearance of the dialog. Optional.
maskColor string Color of the background mask. Default is “rgba(0, 0, 0, 0.2)” Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onPreShow func Called just before the alert dialog is displayed. Optional.
onPostShow func Called just after the alert dialog is displayed. Optional.
onPreHide func Called just before the alert dialog is hidden. Optional.
onPostHide func Called just after the alert dialog is hidden. Optional.
onDeviceBackButton func Custom handler for device back button. Optional.

Preset Modifiers

[improve this]
Name Description
material Material Design style
rowfooter Horizontally aligns the footer buttons.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.