Introduction

The Action is an individual, interactive button displayed in a meta-cell. It lets users act on a piece of content through contextual actions, such as commenting on it, saving it as a favorite, or sharing it, right where the content is displayed.

The same element appears today in three hosts: the ToolBar, the Actions Menu, and the media zone of a cell. Its display adapts to the layout and to the type of content.

Anatomy

The icon and its background

The Action is an icon, and its look depends on where it lives. Inside the media, it sits on its own background, with a larger padding. In a ToolBar, it is more compact and minimal: the icon alone, without a background.

One element, three hosts

The icon can come with a text label, such as the number of comments. The count lives in the ToolBar, next to the icon, and in the Actions Menu, inside the label of the action. Inside the media, the Action shows its icon alone, always.

Properties

Background

Inside the media, the background of the Action is black at 50% opacity by default: the icon stays readable over any picture, and what is underneath keeps showing through. It is a regular Background, so it can be customized like any other: a flat color, a gradient, an opacity.

Shape

The Shape atom applies to the background, with one exception: in Round, the corners stop at 8px instead of the usual 12px.

Border and shadow

On the media, the background of the Action also takes the Border and Shadow atoms, both off by default.

Layout

Size and spacing

Inside the media, the Action is a 40px square. When the icon comes with a count, a fixed spacing of 4px separates the two, and the count is written in the system font, at 11px.

Placement

Inside the media, the Action anchors in the top zone, in the corner on the side of the thumbnail: top left when the thumbnail sits on the left of the cell, top right when it sits on the right or fills the whole width. Without a thumbnail, it keeps its background and takes the top left corner of the cell.

Behavior

The actions

Comment opens the comment view. Add to Favorites saves the content, and Remove from Favorites takes it back out. Share opens the native share dialog of the device. This list is not exhaustive: it will grow with the product.

These actions are contextual. The set depends on the type of content, and only the actions enabled in the item's detail toolbar are offered.

The favorite reflects its state

The favorite reflects its current state: saved, or not. Its icon switches from the one that saves the content to the one that removes it, and each state can take its own color.