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.
Actions function like buttons but are styled like links. Actions have hover, focused and disabled states.
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.
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.
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.
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.