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.
npm install @capacitor/action-sheet
npx cap syncThis 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.3.0)PWA Elements are required for Action Sheet plugin to work.
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);
};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
| Prop | Type | Description | Since | 
|---|---|---|---|
| index | number | The index of the clicked option (Zero-based) | 1.0.0 | 
| Prop | Type | Description | 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 | 
| 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 | 
| 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 availabe option. | 1.0.0 |