Bulk Action Bar

The bar that appears once rows are selected. It states the count in words next to the destructive button, because "Delete" and "Delete 4,812 records" deserve different amounts of hesitation.

src/components/ui/bulk-action-bar.tsx

About

From the component's own source, where it was written.

The bar that appears once rows are selected.

Floating over the content rather than pushing it down. A bar that inserts itself into the flow shifts every row the moment you tick a checkbox, and the second checkbox you aim for has moved — the classic way to select the wrong thing.

Destructive actions state the count in the label. "Delete" and "Delete 240 users" deserve different amounts of hesitation, and the number is the only thing that supplies it.

Install

npx astralyx-ui add bulk-action-bar

Usage

import { BulkActionBar } from '@/components/ui/bulk-action-bar'

<BulkActionBar count={selected.length} onClear={clear}>
  <Button size="sm" variant="colored" color="destructive">Delete</Button>
</BulkActionBar>

Composer

Change the props and the source below follows.

4 selected

Props

count

floating

tsx

<BulkActionBar count={4} onClear={clear}>
  <Button size="sm" variant="colored" color="destructive">Delete</Button>
</BulkActionBar>

Examples

Following a selection

tsx

<BulkActionBar count={selected.length} onClear={clear}>…</BulkActionBar>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`BulkActionBar`

The bar that appears once rows are selected.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
count	number	required	Selected rows. At zero the bar renders nothing at all rather than an empty shell.
onClear	() => void	—	Deselect everything. Always reachable — a selection you cannot escape is a trap.
children	ReactNode	—	The actions. Put the destructive one last, and let it say what it will destroy.
label	(count: number) => ReactNode	—	—
floating	boolean	true	Overlays the content instead of taking layout space, for a long table where the bar should follow the reader.
barLabel	string	'Bulk actions'	Accessible name for the bar itself.
clearLabel	string	'Clear selection'	—

Behaviour

Topic	Detail	Description
announcement	live region	The count is announced on change, so a keyboard user selecting rows knows how many they have.