Skip to main content
Version: v6

@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.10.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.

ParamType
optionsShowActionsOptions

Returns: Promise<ShowActionsResult>

Since: 1.0.0


Interfacesโ€‹

ShowActionsResultโ€‹

PropTypeDescriptionSince
indexnumberThe index of the clicked option (Zero-based)1.0.0

ShowActionsOptionsโ€‹

PropTypeDescriptionSince
titlestringThe title of the Action Sheet.1.0.0
messagestringA message to show under the title. This option is only supported on iOS.1.0.0
optionsActionSheetButton[]Options the user can choose from.1.0.0

ActionSheetButtonโ€‹

PropTypeDescriptionSince
titlestringThe title of the option1.0.0
styleActionSheetButtonStyleThe style of the option This option is only supported on iOS.1.0.0
iconstringIcon for the option (ionicon naming convention) This option is only supported on Web.1.0.0

Enumsโ€‹

ActionSheetButtonStyleโ€‹

MembersValueDescriptionSince
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