<ActionSheetButton />



There are two components used to show dialogs: Dialog and AlertDialog. The Dialog component is a general dialog where you can put any content while the AlertDialog has some default styles that make it easy to show errors, warnings or questions to the user.

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)

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.


名前 型 / デフォルト値 概要
modifier string The appearance of the action sheet button. (翻訳中) Optional.
icon string Creates an Icon component with this string. Only visible on Android. (翻訳中) Optional.
onClick function This function will be called when the button is clicked. (翻訳中) Optional.


Name 概要
destructive “destructive”なボタンを表示します(iOSでのみ有効)。
material マテリアルデザインのアクションシート用のボタンを表示します。


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

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