Ionic Actionsheet
π
2026-06-20 | π Ionic
# Ionic ActionSheet
The ActionSheet presents a set of options to the user by popping up from the bottom of the screen.
Very dangerous options are highlighted in red to be immediately recognizable. You can dismiss it by tapping the Cancel button or tapping outside the sheet.
* * *
## Example
### HTML Code
Action Sheet
### JavaScript Code
To trigger the ActionSheet in code, you need to use the `$ionicActionSheet` service in your Angular controller:
angular.module('starter', ['ionic']).run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } });}).controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){ $scope.show = function() { var hideSheet = $ionicActionSheet.show({ buttons: [ { text: 'Share This' }, { text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() { // add cancel code.. }, buttonClicked: function(index) { return true; } }); $timeout(function() { hideSheet(); }, 2000); }; }])
[Try it Β»](#)
The running effect is as shown below:
!(#)