<Toast />

The Toast or Snackbar component is useful for displaying dismissable information or simple actions at (normally) the bottom of the page.

This component does not block user input, allowing the app to continue its flow. Furthermore, it can be automatically hidden after a timeout.

Tutorial

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.
  });

Props

Name Type Default Value Description
isOpen bool Indicates whether the toast open and shown. Required.
animation string Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". Optional.
modifier string The appearance of the toast. Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onPreShow function Called just before the toast is displayed. Optional.
onPostShow function Called just after the toast is displayed. Optional.
onPreHide function Called just before the toast is hidden. Optional.
onPostHide function Called just after the toast is hidden. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.