Intro

Usage

Use the action sheet if:

• You need an option that provides more than one action.
• It is really important that the user stays in context on a phone.
• You only have a small number of actions.

Do not use the action sheet if:

• The menu provides only one option. In this case, consider using a button instead.
• You need to show a hierarchical menu. In this case, use the menu button instead.
• Your users would benefit more from a split button, which offers an easy-to-access default action, with the option to include additional actions.

Responsiveness

The action sheet is fully responsive. On smartphones, the actions are displayed as a list inside a dialog. On tablets and desktop devices, the actions are displayed in a 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. The cursor/focus area for buttons within the action spans the full width of the action sheet (which in turn depends on the longest button).

Components

The following UI elements can be placed in the action sheet:

• Button
• Icon

Behavior and Interaction

Clicking

A click on the overflow icon (“…”) opens either a popover or a dialog. The user can trigger an action or close the action sheet by clicking anywhere on the screen. On a smartphone, 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.

Resources