IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Action Bar

/

Design

Allow users to execute on multiple items at once.

The action bar itself is triggered in multi-select mode, assuming the user selects a number of items on which to perform a single action. (Though performing the action on just one item is also allowed.)

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Action Bar documentation and examples.

Functions

The action bar is displayed as soon as a single item is selected. Once it appears at the top of the selection area, it can be removed by performing a given action, deselecting the item(s) or clicking dismiss on the right.

0 athletes selected

Michael Jordan
Larry Bird
David Robinson

Mobile

An action can be performed on one or more items in different ways on mobile devices.

  • A combination of a button and Apple action sheet may be used in place of the action bar to let users initiate or complete tasks. In some cases destructive actions, like delete, may also be included. Action sheets should be reserved for actions taken outside of the Hudl ecosystem, like sharing to a conversation in Messages app, or opening a link in Safari app. Alternatively if only one action can be taken include the action in the navigation bar instead.

  • Contextual app bars work in place of the action bar and should be used in all cases.

Usage

Selection Info

Selection info is required for all action bars. It appears on the left to balance available actions on the right.

Actions

Actions appear on the right to sit near the default action of dismiss. While there is no limit to the number of actions you may provide, there is a minimum of one.

The actions listed should apply to all selected items. Once a selection is made, the user cannot make exceptions as to which items are affected by a given action. If an action doesn't apply for all selected items, disable that action.

Position

  • Location: The action bar appears at the top of the interface in which the items are selected.
  • Container: The action bar’s container is only as wide as the selection area, not the full page.
  • Space: The action bar has a built-in margin to standardize its placement in any container.

Microcopy

Selection Info

The selection info should display the total number of items selected, a label for those items, and the clarification that they are selected.

Regardless of the selection count, stick to numerals—do not spell out smaller numbers.

Don't spell out numbers 1-9.

Don'tspell out numbers 1-9.

Do provide a clear count for how many they've selected.

Doprovide a clear count for how many they've selected.

Actions

The actions should always be verbs. Try sticking to a single word. In some cases, a phrase may be necessary. Just make it short and actionable.

Don't use a complete sentence for each action.

Don'tuse a complete sentence for each action.

Do give them a single directive for the selected items.

Dogive them a single directive for the selected items.

Case & Punctuation

All selection info should be lowercase, not sentence case. (That would capitalize the first word, which we don’t want to do.)

Don't capitalize any letter in the selection info.

Don'tcapitalize any letter in the selection info.

Do lowercase the entire string.

Dolowercase the entire string.

Treat actions as labels with title case.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconCritical ViolationIconConfirmation Pass
  • IconCriticalComponent contains an interactive div or span with no associated role.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.