@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(...)
• Interfaces
• Enums

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 |