Action bar in Dark theme

Action bar is split into a separate component for each color theme — light and dark. Since each is set to either light or dark mode in Figma, they do not switch automatically like the rest of the UI when placed in frames that are set to “auto” mode.

In dark theme, the action bar also includes a 1px inner border to help it stand out against the background colors.

Action group variants (Icon-only, Label-only, Icon + label)

At larger screen or section sizes, use an action group that shows a label and icon. For smaller screen or section sizes, use an icon-only action group. Place any overflow actions into a action menu at the end of the bar.

Action disabled behavior

Individual actions can be disabled in an action bar which follow the isDisabled property of the action group. This disabled state shows that the action buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action group may become available later.

Placement

When a user selects items with relevant actions, an action bar appears at the bottom of the viewport. The bar should have margins of spacing-200 (12 pixels on desktop scale) on the sides and bottom.

Safe zone

Include a safe zone of at least spacing-400 (24 pixels on desktop scale) between the item counter and the action group.

Motion and stickiness

Action bars slide and fade in from the bottom of the page or section. They remain or "stick" there until a user either deselects the items or navigates away.