BulkActionBar

The BulkActionBar component gives selected rows a visible action surface for admin workflows like assigning orders, exporting filtered rows, or applying destructive state changes.

Import

import {
  BulkActionBar,
  BulkActionBarActions,
  BulkActionBarClear,
  BulkActionBarMeta,
  BulkActionBarSelection,
} from '@nim-ui/components';

Basic Usage

Selected Rows

View Code

<BulkActionBar aria-label="Selected order actions">
  <div className="flex flex-col gap-1">
    <BulkActionBarSelection count={3} label="orders selected" />
    <BulkActionBarMeta>High-risk review queue</BulkActionBarMeta>
  </div>
  <BulkActionBarActions aria-label="Bulk order actions">
    <Button variant="outline" size="sm">Assign</Button>
    <Button variant="outline" size="sm">Export</Button>
    <Button variant="primary" size="sm">Approve</Button>
  </BulkActionBarActions>
  <BulkActionBarActions aria-label="Danger actions" variant="destructive">
    <Button variant="destructive" size="sm">Cancel</Button>
  </BulkActionBarActions>
  <BulkActionBarClear onClear={clearSelection} />
</BulkActionBar>

Props

BulkActionBar

Name	Type	Default	Description
aria-label	string	-	Accessible label for the selected-row toolbar.
tone	'default' | 'elevated'	'default'	Visual emphasis for the sticky container.
className	string	-	Additional classes for layout and positioning.
children *	ReactNode	-	Selection summary, action groups, and optional clear control.

BulkActionBarSelection

Name	Type	Default	Description
count *	number	-	Number of selected records.
label	string	'selected'	Label rendered after the selected count.

BulkActionBarActions

Name	Type	Default	Description
variant	'default' | 'destructive'	'default'	Groups standard and destructive actions separately.
aria-label	string	-	Accessible label for this action group.

Backoffice Guidance

• Render BulkActionBar only after at least one row is selected.
• Keep the selected count visible while operators scan the table.
• Put destructive actions in a separate BulkActionBarActions variant="destructive" group.
• Provide BulkActionBarClear so users can exit bulk mode without losing table context.