React Reference > Dialog Component

<Dialog />

Dialog that is displayed on top of current screen. As opposed to the AlertDialog element, this component can contain any kind of content. The dialog is useful for displaying menus, additional information or to ask the user to make a decision. It will automatically be displayed as Material Design when running on an Android device.

Usage 

<Dialog onCancel={this.onCancel}
     isOpen={this.props.isOpen}
     style={{height: 250}}  cancelable>
     <Page>
       Page Content
     </Page>
    </Dialog>

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 Display a Material Design dialog.

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.