Skip to content

action-sheet

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

action-sheet

README.md

@capacitor/action-sheet

The Action Sheet API provides access to native Action Sheets, which come up from the bottom of the screen and display actions a user can take.

Install

npm install @capacitor/action-sheet
npx cap sync

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

  • androidxMaterialVersion: version of com.google.android.material:material (default: 1.13.0)

PWA Notes

PWA Elements are required for Action Sheet plugin to work.

Example

import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';

const showActions = async () => {
  const result = await ActionSheet.showActions({
    title: 'Photo Options',
    message: 'Select an option to perform',
    options: [
      {
        title: 'Upload',
      },
      {
        title: 'Share',
      },
      {
        title: 'Remove',
        style: ActionSheetButtonStyle.Destructive,
      },
    ],
  });

  console.log('Action Sheet result:', result);
};

API

showActions(...)

showActions(options: ShowActionsOptions) => Promise<ShowActionsResult>

Show an Action Sheet style modal with various options for the user to select.

Param Type
options ShowActionsOptions

Returns: Promise<ShowActionsResult>

Since: 1.0.0

Interfaces

ShowActionsResult

Prop Type Description Since
index number The index of the clicked option (Zero-based), or -1 if the Action Sheet was canceled. On iOS, if there is a button with ActionSheetButtonStyle.Cancel, and user clicks outside the Action Sheet, the index of the Cancel button is returned. 1.0.0
canceled boolean True if the Action Sheet was canceled by user; False otherwise. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. 8.1.0

ShowActionsOptions

Prop Type Description Default Since
title string The title of the Action Sheet. 1.0.0
message string A message to show under the title. This option is only supported on iOS. 1.0.0
options ActionSheetButton[] Options the user can choose from. 1.0.0
cancelable boolean If true, the Action Sheet is canceled when clicked outside; If false, it is not. On iOS, it's not available if there is a button with ActionSheetButtonStyle.Cancel, or on iOS 26+. In those cases, the Action Sheet is always cancelable by clicking outside of it. On Web, requires having @ionic/pwa-elements version 3.4.0 or higher. false 8.1.0

ActionSheetButton

Prop Type Description Since
title string The title of the option 1.0.0
style ActionSheetButtonStyle The style of the option This option is only supported on iOS. 1.0.0
icon string Icon for the option (ionicon naming convention) This option is only supported on Web. 1.0.0

Enums

ActionSheetButtonStyle

Members Value Description Since
Default 'DEFAULT' Default style of the option. 1.0.0
Destructive 'DESTRUCTIVE' Style to use on destructive options. 1.0.0
Cancel 'CANCEL' Style to use on the option that cancels the Action Sheet. If used, should be on the latest available option. On iOS 26+ is not displayed, the Action Sheet is cancelable by tapping outside. 1.0.0