Introduction

The ToolBar is a structural group, a row that hosts the contextual and interactive elements displayed below the main content of a cell. It gives a consistent layout and spacing to the metadata and the actions related to a piece of content.

It can hold five elements, the Author, a Text, the Player, an Action such as the comment or the favorite, and the Actions Menu. Each meta-cell, and each list, decides which of them are shown, and in what order.

Anatomy

Two groups on one row

The row reads from left to right. On the left come the metadata, the Author, alone or followed by a Text, or a Text alone, or the Player for a podcast. On the right come the actions, the Action buttons in a row, the Actions Menu that groups them behind one icon, or nothing at all. These are the actions allowed on the detail page of the content, such as comments, share and favorites. The toolbar of the detail page is another object, and the row of the cell only reflects its choices.

The combinations

The two groups combine in several ways. The same row can show an author and a text with two action buttons, an author alone with an Actions Menu, or a player with no action at all. The cell and the list make that choice.

Layout

Spacing

The elements are aligned horizontally, with a fixed spacing that does not change with the device. The Text that follows the Author sits right against it, with no spacing. The metadata start at the edge of the content and can run up to 4px from the first action. Two actions sit 12px apart, and the action icons sit in a 20px square. Vertically, the elements are centered on their baseline.

No wrapping

The row never wraps. When the metadata runs too long, it is truncated with an ellipsis, and the actions stay visible on the right.

Placement

The ToolBar belongs to the meta-cells that display metadata and actions below their content. A compact cell can do without it, and folds its actions into the Actions Menu, next to the title. In a small card, the row keeps the author and folds the actions into the Actions Menu too. What the row shows also depends on the type of content. For a podcast, the Player can take the place of the author.