Design
Component checklist
In development
React
In development
Resources
Anatomy
- Select indicator
- Select all (optional)
- List of options
- Close
Behaviour
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).
Resources