Batch Actions Toolbar

Enterprise
Workflow

Sticky toolbar for multi-select batch operations with approve all, reject all, and custom actions. Shows selection count and auto-hides when cleared.

Preview

Toolbar appears when items are selected

3 of 12 selected
3
3 items selected
9 remaining

Props

BatchActionsToolbar component API reference

PropTypeDefaultDescription
selectedCount*number—Number of currently selected items
totalCount*number—Total number of items in the list
onApproveAll() => void—Callback when approve all button is clicked
onRejectAll() => void—Callback when reject all button is clicked
onClearSelection() => void—Callback when clear button is clicked
actionsAction[][]Additional custom action buttons
classNamestring—Additional CSS classes for the container

Action Type

PropTypeDefaultDescription
label*string—Button label text
iconstring | ReactNode—Optional icon (emoji or component)
onClick*() => void—Click handler
variant'default' | 'primary' | 'danger''default'Button style variant

Usage

Import and implementation example

import { BatchActionsToolbar } from '@/components/ui/batch-actions-toolbar'

export default function Example() {
  const [selectedItems, setSelectedItems] = useState<string[]>([])
  const allItems = ['item1', 'item2', 'item3', /* ... */]

  const handleApproveAll = () => {
    // Process all selected items
    selectedItems.forEach(id => approveItem(id))
    setSelectedItems([])
  }

  const handleRejectAll = () => {
    selectedItems.forEach(id => rejectItem(id))
    setSelectedItems([])
  }

  return (
    <BatchActionsToolbar
      selectedCount={selectedItems.length}
      totalCount={allItems.length}
      onApproveAll={handleApproveAll}
      onRejectAll={handleRejectAll}
      onClearSelection={() => setSelectedItems([])}
      actions={[
        { label: 'Export', icon: '📤', onClick: handleExport },
        { label: 'Archive', icon: '📁', onClick: handleArchive },
      ]}
    />
  )
}
This block is self-contained (no UI component dependencies)

Features

Built-in functionality

  • Sticky positioning: Toolbar stays visible at top of viewport when scrolling
  • Selection counter: Shows selected count with remaining items
  • Bulk approve/reject: One-click actions for all selected items
  • Custom actions: Add additional batch operations with icons
  • Auto-hide: Toolbar disappears when selection is cleared
  • Visual feedback: Indigo background indicates active selection state
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

All action buttons are native button elementsSelection count is announced in visible textClear button provides escape hatch from selection mode

Keyboard Navigation

KeyAction
TabNavigate between action buttons
Enter / SpaceActivate focused button
EscapeConsider adding to clear selection

Notes

  • Toolbar appears/disappears based on selection state
  • Selection count is visible and updated in real-time
  • Consider adding aria-live for selection count changes
  • Sticky position ensures toolbar is always reachable

Related Components

Approval GateReview QueueButtonBadge