<Toast />



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}>

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

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.


名前 型 / デフォルト値 概要
isOpen bool Indicates whether the toast open and shown. (翻訳中) 必須
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.



Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。