BulkActionBar

Unified toolbar for bulk selection operations

Overview

BulkActionBar provides a consistent toolbar for displaying selection count and bulk actions across tables, lists, and other multi-select interfaces. It features a 3-zone layout: count display, flexible actions zone, and clear button.

Key Features

Flexible children slot for buttons, dropdowns, or any ReactNode
Built-in selection count with i18n pluralization
Optional custom count label for domain-specific wording
Consistent styling that matches AdminListTableBlock

Examples

Basic Usage

Simple bar with button actions and clear functionality.

Simulated selection:

3 items selected

With Dropdown Actions

Use dropdowns for complex actions like segment assignment.

5 users selected

Custom Count Label

Override the default count label for domain-specific wording.

12 members ready for export

3 projects will be affected

Props Reference

Prop	Type	Default	Description
`count`	`number`	`required`	Number of selected items
`countLabel`	`string`	`-`	Custom count label (overrides default i18n string)
`onClear`	`() => void`	`required`	Handler to clear selection
`children`	`ReactNode`	`-`	Action content (buttons, dropdowns, etc.)
`disabled`	`boolean`	`false`	Whether actions are disabled
`variant`	`"default" \| "floating"`	`"default"`	Visual variant
`hideClear`	`boolean`	`false`	Hide the clear button
`clearLabel`	`string`	`-`	Custom clear button label
`className`	`string`	`-`	Additional className

Usage

import { BulkActionBar } from '@/ui/components';
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/ui/primitives';

function MyListWithBulkActions() {
  const [selectedIds, setSelectedIds] = useState<string[]>([]);

  return (
    <>
      {selectedIds.length > 0 && (
        <BulkActionBar
          count={selectedIds.length}
          onClear={() => setSelectedIds([])}
        >
          {/* Simple button action */}
          <Button variant="secondary" size="sm" onClick={handleEdit}>
            <Icon icon={faPencil} />
            Edit
          </Button>

          {/* Dropdown for complex actions */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="secondary" size="sm">
                <Icon icon={faTags} />
                Assign Tags
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              {tags.map(tag => (
                <DropdownMenuItem key={tag.id} onClick={() => assignTag(tag.id)}>
                  {tag.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Destructive action */}
          <Button variant="destructive" size="sm" onClick={handleDelete}>
            <Icon icon={faTrash} />
            Delete
          </Button>
        </BulkActionBar>
      )}

      <MyTable
        selectedItems={selectedIds}
        onSelectionChange={setSelectedIds}
      />
    </>
  );
}

Prop

Type

Default

Description

count

number

required

Number of selected items

countLabel

string

-

Custom count label (overrides default i18n string)

onClear

() => void

required

Handler to clear selection

children

ReactNode

-

Action content (buttons, dropdowns, etc.)

disabled

boolean

false

Whether actions are disabled

variant

"default" | "floating"

"default"

Visual variant

hideClear

boolean

false

Hide the clear button

clearLabel

string

-

Custom clear button label

className

string

-

Additional className

import { BulkActionBar } from '@/ui/components'; import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/ui/primitives'; function MyListWithBulkActions() { const [selectedIds, setSelectedIds] = useState<string[]>([]); return ( <> {selectedIds.length > 0 && ( <BulkActionBar count={selectedIds.length} onClear={() => setSelectedIds([])} > {/* Simple button action */} <Button variant="secondary" size="sm" onClick={handleEdit}> <Icon icon={faPencil} /> Edit </Button> {/* Dropdown for complex actions */} <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="secondary" size="sm"> <Icon icon={faTags} /> Assign Tags </Button> </DropdownMenuTrigger> <DropdownMenuContent> {tags.map(tag => ( <DropdownMenuItem key={tag.id} onClick={() => assignTag(tag.id)}> {tag.name} </DropdownMenuItem> ))} </DropdownMenuContent> </DropdownMenu> {/* Destructive action */} <Button variant="destructive" size="sm" onClick={handleDelete}> <Icon icon={faTrash} /> Delete </Button> </BulkActionBar> )} <MyTable selectedItems={selectedIds} onSelectionChange={setSelectedIds} /> </> ); }