Action bar
An action bar is a collection of components that provide controls to give users more agency over their content or data sets.
- All filters action
- Filter group
- Action group
Filter group
The filter group contains all filter-related buttons. The lead filter button includes a generic “All filters” button that launches a sheet with all available filters.
Action group
The action group is optional and contains up to 3 non-filter actions. Additional actions can be collapsed into an overflow icon button in the first position.
Collapsing buttons
Buttons are collapsed into an overflow button and filter menu as the overall width is reduced. The filter buttons collapse first before all action buttons are collapsed into an overflow.
Small web
On smaller screens, trailing buttons are collapsed into an overflow button and filter buttons are hidden.
The trailing buttons collapse into an overflow first, followed by the filter buttons.
Small native
If the trailing actions are present, the actions are collapsed into an overflow and the filter buttons are hidden on smaller screens, similar to the web behavior.
If the trailing actions aren’t present, the filter buttons extend beyond the screen and the container becomes horizontally scrollable.
Medium
Filter and action group content remain visible as space permits. The action group will collapse into an overflow first, followed by the trailing filter buttons.
Large
Large screens surface up to the maximum number of content in each group as space permits.
Non-stacking
Content within the action bar remains on a single line.
Don’t wrap content within the action bar.
Selected position
Do maintain each filter button’s original position as selections are made. For more details, see Quick filter.
Don’t change the position of filters as selections are made.
