<ActionSheetButton />

Component that represent each button of the action sheet.



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.


Name Type Description
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.

Preset Modifiers

Name Description
destructive Shows a “destructive” button (only for iOS).
material Display a Material Design action sheet button.

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.