Bulk Toolbar

A contextual toolbar shown while rows are selected — a count, a clear control, and consumer-supplied action buttons as children. Renders nothing when count is 0.

Installation

pnpm dlx shadcn@latest add @syncblocks/bulk-toolbar

Usage

import { BulkToolbar } from "@/components/ui/bulk-toolbar"

<BulkToolbar count={selected.size} onClear={() => setSelected(new Set())}>
  <Button variant="outline" size="sm">
    Export
  </Button>
  <Button variant="outline" size="sm" onClick={() => setConfirmDelete(true)}>
    Delete
  </Button>
</BulkToolbar>

BulkToolbar renders nothing when count is 0 — mount it unconditionally next to whatever list or table drives the selection, and it appears once something is selected. It only owns the count and clear affordance; the action buttons are entirely consumer-supplied as children, so you decide which actions exist and how they behave (including any confirmation dialog for destructive ones — see Data Grid's "Row selection" section for a bulk-delete example wired to onRowDelete).

API Reference

Prop	Type	Default	Description
`count`	`number`	-	Number of selected items. The toolbar renders nothing when this is 0.
`onClear`	`() => void`	-	Called when the clear button is clicked.
`children`	`React.ReactNode`	-	Bulk-action buttons rendered after the separator.
`className`	`string`	-	Placement/layout classes, e.g. floating over a table.

Installation Data Filter