Bulk editing is a pattern for actions that may be performed on multiple items within a table or list. Once the user selects at least one item or enters edit mode, the bulk action bar appears at the top of the section with options.
The bulk action bar can include a selector element, but it is not mandatory if the base experience already has a default selector. The selector can also be a quick way to select or deselect all.
CTA buttons and Icon buttons can be used in the bulk edit bar. When using icon buttons, ensure that the action can be easily represented through an icon alone.
The action bar remains fixed to the top of the page or section when scrolling while content scrolls beneath it.
When items are selected, the results counter will reflect the selections made.
Dropdowns and overflows can be used to provide more options for actions. Use menus to group similar action when needed.
When bulk editing is initiated on native platforms, the interface transitions into a focused mode with a header takeover and the tray navigation hidden for a cleaner, more streamlined editing experience.
On small web screens, the filter bar is full-width.
On medium and large native screens, the interface also transitions into a focused mode with a header takeover and the tray navigation hidden for a cleaner, more streamlined editing experience.
On medium and large web screens, the bulk edit bar extends across the entire width of its content section, allowing it to display more actions by default.
Do use the tertiary button style for actions.
Don’t add other buttons styles to the bulk edit bar.
Do use the appropriate semantic color for destructive actions.
Don’t add semantic colors to non-destructive actions.
