Actions

Definition

Actions are functions that work like buttons but are styled like links. Actions can apply to a whole page (e.g. Print), or a component (e.g. Add to Workbook) or be nested in a menu.

Common Characteristics

Actions function like buttons but are styled like links. Actions have hover, focused and disabled states.

Options

Actions can be text or an icon or an icon + link pair. To preserve screen real estate actions can be placed in a menu. Action menus are opened with a label + down chevron (e.g. More ⌵, Actions ⌵, etc) or a kabob icon (). Similar actions can be grouped in the menu using a horizontal divider. The Actions Menu is right-aligned with the action that opens it but can be left- or center-aligned.

Usage Guidelines

Use Action Menus to reduce clutter at the top of a page. Avoid more than two page-level actions.

Use Action Menus to reduce clutter on cards.

Actions that also indicate a status (e.g. Add to workbook or Set Lane Alert) should not be nested in a menu.

Examples

Page actions appear in the top-right of the screen.

Display no more than two actions on the page.

Nest actions in an Actions Menu when more than two are needed.

Similar actions can be grouped by a horizontal divider.