Inline Toolbars

A secondary toolbar that is attached to a list. The toolbar contains controls (primarily buttons) that act on selected items in the list.

When to use

Inline toolbars are the recommended design pattern for lists that have editable content. One common pattern is to use buttons in the toolbar for add and remove actions.

In some cases, it may be more appropriate to site controls for list items in the list row itself. If controls will only operate on some list items, having them alongside that item will indicate which items can be acted upon, for example. Likewise, if controls are intended to indicate state (such as switches), having them in each row could give the user a useful overview.

Guidelines

Follow existing implementations, such as those that can be found in the Settings.

Work to keep the number of controls in the toolbar to a minimum.

If add and remove buttons are present, ensure that the first control is the add button, followed by remove.