ComponentsData Display
BulkActionBar
Sticky selected-row action bar for admin tables and bulk workflows
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
3orders selected
High-risk review queue
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
BulkActionBaronly 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
BulkActionBarClearso users can exit bulk mode without losing table context.