Bulk edit

v1.0

Bulk edit 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

Relevant

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

Optional if the base experience already has a default selector. The selector lets users select or deselect all items at once.

Counter

The counter uses numerals to reflect how many items are selected.

Use sentence case
No ending punctuation
Format as "[#] selected" or "All [#] items selected"
Use numerals for numbers

Actions

CTA buttons and Icon buttons can be used in the bulk edit bar. Icon buttons must be clearly represented by an icon alone and include a tooltip for clarity.

Button labels

Use a verb to name the action being performed on the selected items.

Use sentence case
No ending punctuation

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.