Contextual Action

The Contextual Action pattern describes how a user can perform actions on an object or item. There are are three common approaches to displaying a contextual action:

Page: The action is available directly on a page, like an icon or button.
Popup: The action is displayed as an icon or button in a popup, dialog, menu or sheet.
Reveal: The action is revealed after a swipe or tap. For example list item is revealed or card is flipped.
Gesture: In some apps gestures can perform the action by itself (i.e. pinch to close, spread to open, swipe to delete, etc...).

Contextual actions are often used to share, create, or communicate. Contextual actions that are frequently performed, such as calling a contact's phone number, should be easily accessible and immediately visible in the interface. Actions that are only occasionally executed may be accessed by gestures or an icon that opens a list of actions. Please refer to the related patterns below for more information.

Appearance

Appearance characteristics for this pattern.

Popup

Trigger: Tap or press and hold on an icon, card, item or image may trigger the popup, dialog, menu or sheet.
Placement: These popups appears on the page directly above, below or adjacent to the item or object that triggered it.
Layout: Use the entire popup window for content. Do not use a header within the popup window. When using popups on the tablet, use an arrow to point to the item that triggered it. On phones, contextual actions appear in a popup that is called Action Sheet. Background of the popup is dimmed and the actions slide out from bottom.

Reveal

Trigger: Swipe on an list item to reveal the actions or tap on card to flip the card to show actions on the back.
Placement: The actions are usually place on the left or right side of list item. On the back of a card they might evenly distributed.
Layout: The revealed actions are displayed on the list item or card that has been revealed.

Behavior

Common behaviors for this pattern.

Popup

Opening: The user brings up available actions by a single tap or press and hold of the element on the screen.
Timing: The popup should appear immediately on the screen.
Animation: Different components may use different animation, such as: cover, reveal, fade and/or zoom.
Closing: Close the contextual actions popup by tapping a close icon, choosing an action, or auto dismiss by tapping outside the popup.

Reveal

Opening: The actions should be revealed in real time as the user swipes or taps.
Direction: The user can reveal a single set of actions by swiping left or right, or tapping to view a card flip left, right, up or down.
Closing: Close the actions by doing the opposite swiping gesture, tap again or auto dismiss by tapping outside the area.

Usage

Usage guidelines for this pattern.

Popup

For tablets, use popup windows with the arrow anchor turned on to show the action trigger origination.
Limit the number of contextual actions to six per view.
On phone, use an actions icon or button to open a popup window with a list of actions. Consider alternate methods of displaying contextual actions, such as rotating or flipping the interface, when tapping an icon, card or analytic.
Size the popup to fit the number of contextual actions being shown.
If you use the press and hold to trigger the actions, apply this interaction consistently throughout the application so that users know what to expect.
Do not rely on press and hold as the only method to complete a task. It should be available as a convenience for less frequently used actions. Primary actions should be clearly visible on the screen.

Reveal

If you use swipe to reveal actions, apply this interaction consistently throughout the application so that users know what to expect from lists.
Only provide a few actions that are frequently used.
This pattern works well for lists where the user frequently removes items (for example, a task list).