Components

Action List

Design
Code

Provide a number of possible executions in a confined space.

Like the action bar, action lists are ideal for situations where an execution would apply to multiple items at once.

Type

The action list type is determined both by the actions listed and the list’s relationship to nearby buttons.

  • Share
  • Edit
  • Delete

Primary: Reserved for the strongest actions available, typically the only ones appearing in a given interface.

Style

The style depends on the interface, not just in terms of available space, but also how nearby actions appear.

  • Add to Playlist
  • Share
  • Edit
  • Delete

Label Only: Simply spell out the available actions—no visual flourish required.

Usage

Actions

  • Actions listed should apply to all selected items. Once a selection is made, the user cannot make exceptions as to which items are affected.
  • There isn’t a limit to how many actions may be provided, but there is a minimum of two—including any destructive actions.
    actionlist-itemnumber-dont

    Don'tlist a single action when one button will do.

    actionlist-itemnumber-do

    Dolist more than one action that applies to all selected items.

  • Destructive actions should always be placed last in the list. Users can adapt to seeing items like delete near the end.
    actionlist-itemorder-dont

    Don'tlist actions in an illogical order.

    actionlist-itemorder-do

    Dokeep destructive actions anchored to the bottom.

Placement

An action list should appear near the right side of an interface, especially when used inside of an action bar.

Type

Because an action bar provides primary actions for the items selected, an action list used within any action bar should always be primary.

actionlist-actionbar-dont

Don'tuse a secondary or subtle action list in an action bar.

actionlist-actionbar-do

Doinclude additional primary actions.

Microcopy

Actions

Actions should always be verbs. If you can’t stick to a single word, max out with a three-word phrase.

actionlist-action-dont

Don'tuse a complete sentence for each action.

actionlist-action-do

Dogive them a single directive for all selected items.

Case & Punctuation

All item labels should follow our UI label guidelines. Use title case with no punctuation.

actionlist-sentence-dont

Don'tuse sentence case for an action.

actionlist-sentence-do

Dotitle case the entire string.

Platforms

platformnotes
Web
  • Stick to the guidelines above.