Components | omverse-ui

Overview

Use BulkActionBar when selecting one or more records changes the available actions and their scope.

Selected work items

Live preview

Open More actions, start an operation, reset the preview, or clear the selection.

4 of 18 selected

Across the current filtered result set

WorkItemsBulkActions.tsx

tsx

1import { BulkActionBar, Button } from 'omverse-ui'
2 
3<BulkActionBar
selectedCount={selectedIds.length}
totalCount={results.length}
description="Across the current filtered result set"
onClearSelection={() => setSelectedIds([])}
actions={
  <>
    <Button variant="outlined">Export</Button>
    <Button>Assign owner</Button>
  </>
}
overflowActions={<BulkOverflowActions />}
15/>

Anatomy

Keep scope, context, frequent actions, overflow, and the clear path in one predictable order.

✓4 of 18 selectedCurrent filtered resultsExportAssign•••×12345

1
Selection indicator
Signals that the interface has entered a multi-record action mode.
2
Selection scope
States how many records are affected and which result set they belong to.
3
Visible actions
Keeps the safest and most frequent operations immediately available.
4
Overflow actions
Contains lower-frequency or higher-risk operations.
5
Clear selection
Returns the collection to its normal browsing state.

When to use

Use when several selected records share a safe, clearly bounded operation.

Act on table or list selections
Connect the bar to stable record identifiers from DataTable or another selectable collection.
Make scope explicit
State selected and total counts before users commit a high-volume change.
Separate action frequency
Keep common operations visible and move occasional actions into overflow.

When not to use

Prefer direct or guided workflows when bulk scope is absent, ambiguous, or unsafe.

Avoid

Do not use for one record
Use row actions, object actions, or a detail-page toolbar.
Do not bypass confirmation
Use a review dialog or wizard for destructive, regulated, or irreversible operations.
Do not mix selection scopes
Never combine records from unrelated collections without explaining the boundary.

Variants

Surface and density treatments adapt the same behavior to embedded and floating workspaces.

Bordered

Default contained bar above or below a collection.

Filled

Uses a tonal surface to emphasize selection mode.

Raised

Floats above scrolling content or layered floorplans.

Sizes

Small, medium, and large preserve minimum action targets.

States

The bar communicates selection readiness, action availability, and asynchronous execution without losing context.

State	Trigger	Visual response	Interaction
Hidden	selectedCount is zero	Bar is not rendered	Collection remains in browsing mode
Active	One or more eligible records selected	Scope and available actions appear	Actions apply to stated selection
Overflow open	More actions activated	Additional action group appears	Escape closes overflow first
Loading	Operation is executing	Progress indicator and stable scope	Duplicate actions are prevented
Disabled	Selection cannot be modified	Reduced emphasis	Controls cannot receive input
Partial availability	Some actions do not apply	Individual actions disabled	Available actions remain usable

Behavior

BulkActionBar owns presentation and toolbar interaction; applications own policy, confirmation, execution, results, and undo.

Selection-driven visibility

The bar enters with the first selection and leaves after selection is cleared.

Keyboard movement

Arrow keys move through actions; Home and End reach boundaries.

Execution lock

Loading prevents duplicate operations while preserving visible scope.

Policy-owned actions

Applications supply only operations allowed for the current user and records.

Accessibility

A named toolbar, live selection count, native controls, and predictable Escape behavior keep bulk mode understandable.

Key	Action
`Tab`	Moves into or out of the bulk-action region.
`←→`	Moves between visible toolbar actions and wraps at the ends.
`HomeEnd`	Moves to the first or last visible action.
`EnterSpace`	Activates the focused native control.
`Esc`	Closes overflow first; otherwise clears selection when configured.

Keep the toolbar label concise and unique.
Announce selection-count changes politely.
State scope in text rather than color alone.
Give icon-only overflow actions accessible names.
Preserve record identifiers while sorting or filtering.
Return focus to a sensible collection control after clearing.
Explain why individually disabled actions are unavailable.

Content guidelines

Selection and action language should make consequences clear before execution.

Quantify the scope

State selected and total records when both are known.

Example4 of 18 selected

Name actions precisely

Use verb-first labels that describe the result.

ExampleAssign owner

Explain exclusions

State why some selected records will not change.

Example2 locked records will be skipped

Describe progress

Include the operation and affected count.

ExampleArchiving 14 records

Examples

Coordinate progress and result reporting outside the bar while keeping the selected scope stable.

Raised action context

Live preview

A higher-emphasis treatment for a scrolling operational workspace.

AsyncBulkAction.tsx

tsx

1const [running, setRunning] = useState(false)
2 
3<BulkActionBar
4  selectedCount={selectedIds.length}
5  loading={running}
6  loadingLabel={`Archiving ${selectedIds.length} records`}
7  onClearSelection={() => setSelectedIds([])}
8  actions={<Button onClick={archiveSelection}>Archive</Button>}
9/>
10 
11async function archiveSelection() {
12  setRunning(true)
13  const result = await archiveRecords(selectedIds)
14  setRunning(false)
15  showBulkResult(result)
16}

Props / API

BulkActionBar extends div attributes and composes application-owned controls through explicit action slots.

Props

PropTypeDefaultDescription

selectedCountnumberrequiredCurrent selection size; zero hides the bar.

totalCountnumberundefinedTotal records available in the current collection or result set.

selectionLabelReactNodegenerated countDomain-specific replacement for the generated selection message.

descriptionReactNodeundefinedSupporting scope, exclusion, or permission context.

actionsReactNoderequiredPrimary and secondary bulk operations.

overflowActionsReactNodeundefinedLower-frequency operations disclosed from More actions.

overflowLabelstring'More bulk actions'Accessible name for the overflow trigger.

overflowOpenbooleanundefinedControlled overflow visibility.

defaultOverflowOpenbooleanfalseInitial uncontrolled overflow visibility.

onOverflowOpenChange(open: boolean) => voidundefinedRuns whenever overflow visibility changes.

onClearSelection() => voidundefinedClears selection and enables Escape-to-clear behavior.

clearLabelstring'Clear selection'Visible and accessible clear-control label.

disabledbooleanfalsePrevents all bulk action input.

loadingbooleanfalseAnnounces progress and prevents duplicate operations.

loadingLabelstring'Applying bulk action'Status announced during execution.

variant'bordered' | 'filled' | 'raised''bordered'Controls surface emphasis.

size'sm' | 'md' | 'lg''md'Controls density and type scale.

stickybooleanfalseKeeps the bar near the viewport bottom in scrolling workspaces.

BulkActionBar

Recommended