Guides Foundations Components Patterns Styles

Bulk actions

Allows users to select multiple items in a list and apply the same action to all of them.

Appearance

Anatomy

Bulk actions consist of standalone Checkboxes with tri-state support, paired with relevant CTAs most likely in the form of Buttons or ButtonIcons.An isolated example of bulk actions:

Item 1

Item 2

Item 3

Open in Playroom

An example in the context of a Divided List:

List heading

3 lorem ipsum

List item 1A line of secondary text

List item 2A line of secondary text

List item 3A line of secondary text

Open in Playroom

Best practices

General best practice

Use a CheckboxStandalone for selection and provide each with an aria-label or aria-labelledby property to maintain accessibility.
Align checkboxes to the left of the list.
Hide bulk actions and surface them once a selection has been made.
Avoid surfacing bulk actions when no selection is made. This keeps the UI clean by reducing unnecessary clutter.
If an action requires the user to confirm, such as a destructive action like “Delete”, consider surfacing this within a Dialog.
Once an action has been completed, consider surfacing a Toast confirmation message.

When to use

Use bulk actions:

to let users apply the same action to multiple items at once
in lists that contain more than one actionable item.

Don’t use bulk actions:

to let users change the order of items (provide a sort option instead)
if users need to narrow a list rather than act on it (use Filters instead).