Design
Component checklist
Up to date
React
Up to date
Anatomy
- Select indicator
- Select all (optional)
- List of options
- Close
Behavior
When the user selects one or more items from a list, table, or similar interface, the bulk-action bar appears at the bottom of the screen. This bar is centered above the content from which the selection was made. If there is a navigation on the left, the bar’s placement will adjust by subtracting the width of the navigation to ensure it remains aligned with the main content area.
The bulk-action bar also has a specific minimum and maximum width. Details are available in the Design properties tab on this page.
If actions performed in bulk do not remove the previously selected items from the current selection (e.g. deletion, or setting a status as Done), and only modify attributes like labels, the bulk-action bar remains active. In this case, it will only disappear when the user manually closes it.
Select all
When a user selects all items in the list, the "Select all" option automatically toggles to "Clear”. This allows users to quickly deselect all items with one click.
Close
Users can close the bulk-action bar in 5 ways:
- Click on the close button [X] within the bulk-action bar
- Press the [ESC] key as a keyboard shortcut
- If all items are selected, clicking on [Clear] will deselect all items and close the bar
- If only one item is selected, deselecting it will automatically close the bar
- Altering the original selection (e.g. by deleting, removing, changing status of selected items) will also close the bar
Overflow
If the number of items do not fit within the bulk-action bar, all items that are not visible are inserted under the meatballs menu (represented by 3 dots).
Placement
In-app
The bar is placed in the middle of the content above which it opens. In case there is a navigation on the left, the width of this navigation is subtracted for its placement.
In dialog
In case the bulk-action bar appears in the space where there is no navigation on the sides, it fills the space to the width with a 24px buffer zone on the sides.
Overlaps
Bulk-action bar should have reserved space at the end of each window, table, list 108px to avoid covering the last item.
Snackbars
Snackbars appear 24px above the bulk-action bar. Their behavior does not change. Here is how snackbars behave.
References