Dialogs

There are three components used to show dialogs: Dialog, AlertDialog and Toast. The Dialog component is a general dialog where you can put any content. AlertDialog has some default styles that make it easy to show errors, warnings or questions to the user. And Toast is a message (with optional button) that does not stop the app flow.

To show or hide the dialog the isOpen prop is used.

<Dialog isOpen={this.state.dialogShown}>
  Hi!

  <Button onClick={this.hideDialog.bind(this)}>
    Close
  </Button>
</Dialog>

Notification methods

The ons.notification object contains some useful methods to easily show alerts, confirmation dialogs and prompts:

• ons.notification.alert(message, options)
• ons.notificaiton.confirm(message, options)
• ons.notification.prompt(message, options)
• ons.notification.toast(message, options)

They all return a Promise object that can be used to handle the input from the user.

ons.notification.confirm('Are you ready?')
  .then((response) => {
    // Handle response.
  });