Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Actions

Bulk Actions Button Group for React

A row of bulk actions, Select All, Delete, Archive and Move, and a second row that shows how many items each one covers.

Framework
UI library

The toolbar that appears above a list once rows are selected. The first group pairs each action with an icon; the second drops the icons and puts the count in the label, Select All (12) and Delete (3), so people see how much an action will touch before they press it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is in the first group?

Select All, Delete, Archive and Move. Each is a Button with size="sm", variant="outline" and an icon before the label. Nothing in the file runs those actions.

Where do the numbers in the second group come from?

They are written into the labels: Select All (12), Delete (3) and Archive (3). Build those strings from your selection so they stay in step with it.

Are the icons announced?

No. Each icon has aria-hidden="true", so the button is read by its label alone.

Should the buttons be disabled when nothing is selected?

Usually, yes. This demo always shows them enabled. Disable Delete, Archive and Move when the selection is empty. Pass disabled.

Should Delete ask for confirmation?

For a bulk delete, yes. Open an Alert Dialog from Delete before removing anything. This demo has no confirmation step.

What if the row doesn't fit?

Four labeled buttons need room. On a narrow screen, keep the most used actions and move the rest into a menu, as the Overflow Menu example does.

All 39 button group examples