Intro
An action sheet consists of a list of options from which the user can select to complete an action. Actions can be clustered if there is not enough space on the screen.
Responsiveness
The action sheet is fully responsive. On phones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions are displayed in a popover.
Size S (Smartphone)
Action sheet dialog
Size M (Tablet)
Action sheet popover
Section Metadata
style
column-section-1-1, no-footprint
Size L (Desktop)
Action sheet popover
Layout
All elements in the action sheet are left-aligned. Actions are always arranged in order of importance, from top to bottom. The Cancel button uses a negative button type and is centered to differentiate it from the other app actions.
Action sheet popover
Action sheet popover
Behavior and Interaction
Clicking/Tapping
Depending on the device, a click or tap on the overflow icon (“…”) opens either a popover or a dialog. The user can trigger an action or close the action sheet by clicking or tapping anywhere on the screen. On a phone, the dialog can be closed only with the Cancel button.
If the user triggers an action, the action sheet closes automatically and the system provides a message toast.
Guidelines
- Never use only icons in the action sheet. Display text only or a combination of icons and text.
- On smartphones, you must provide a Cancel button to enable the user to close the dialog without triggering an action.
- Avoid scrolling in actions sheets. If you include too many buttons in an action sheet, users have to scroll to see all the actions in the list. Not only does it take users longer to distinguish between actions, but they also find it difficult to scroll without tapping a button by mistake.
Action sheet dialog
Section Metadata
style
column-section-1-1, no-footprint
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Elements and Controls
- Button (guidelines)
- Icon (guidelines)
- Popover (guidelines)
- Dialog (guidelines)
- Message Toast (guidelines)
Implementation
- Action Sheet (SAPUI5 samples)
- Action Sheet (SAPUI5 API reference)
Visual Design
- Action Sheet (visual design specification)
- Button (visual design specification)
- Icon (visual design specification)