Bulk editing

v1.0

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.

CSS
Marko
React

Stylized artwork of a bulk edit pattern in a table.

Considerations

Actions should relate to the content or task at hand.

Lightweight

Bulk edit is not a replacement for individual item editing, but rather an entry point for quick, easy actions.

Quick

Bulk edit makes completing functions or tasks easy and intuitive.

Anatomy

Selector and counter
Actions
Close

Properties

Selector

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.

Actions

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.

Behavior

Scroll

The action bar remains fixed to the top of the page or section when scrolling while content scrolls beneath it.

Counter

When items are selected, the results counter will reflect the selections made.

Menus

Dropdowns and overflows can be used to provide more options for actions. Use menus to group similar action when needed.

Screen sizes

As the screen width decreases in a responsive layout, the bulk action buttons collapse into an "Actions" dropdown or overflow menu.

Small native

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.

Small web

On small web screens, the filter bar is full-width.

Medium and large native

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.

Medium and large web

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.