JavaScript Reference > ons-action-sheet-button

ons-action-sheet-button

Component that represent each button of the action sheet.

Tutorial

Action sheets

Onsen UI provides <ons-action-sheet> and <ons-action-sheet-button> elements. Use them to create a dialog that slides from the bottom of the screen to give user options.

<ons-action-sheet id="sheet" cancelable title="From template">
  <ons-action-sheet-button icon="md-square-o">Label</ons-action-sheet-button>
  <ons-action-sheet-button icon="md-square-o">Label</ons-action-sheet-button>
  <ons-action-sheet-button icon="md-close">Cancel</ons-action-sheet-button>
</ons-action-sheet>

This component is referred as “Bottom sheets” in the Material Design spec.

You can display or cancel the action sheet by calling its methods show or hide respectively.

Dynamic action sheet

You can also create and open an action sheet dynamically with the method ons.openActionSheet.

This method takes as argument an object where you can define the action sheet’s properties (e.g. id, title) and the buttons inside it.

ons.openActionSheet({
  title: 'My Action Sheet',
  cancelable: true,
  buttons: ['Label 0', 'Label 1', 'Label 2']
});

See also

Attributes

[improve this]

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-action-sheet-button someAttribute="true" anotherAttribute><ons-action-sheet-button>
JS: document.querySelector('ons-action-sheet-button').setAttribute('someAttribute', 'true')

Name Type Description
icon String Creates an ons-icon component with this string. Only visible on Android. Check See also section for more information. Optional.
modifier String The appearance of the action sheet button. Optional.

Preset Modifiers

[improve this]

Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-action-sheet-button modifier="destructive material"><ons-action-sheet-button>.

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.