Data display
Bulk action toolbar
Select rows and a floating toolbar slides up with the actions that apply to all of them — set status, reassign, change priority, delete. It exists only while there's a selection: zero chrome at rest, then exactly the batch operations the rows support.
npx shadcn@latest add @orbit/bulk-actionsOverview
Tick a few rows (or the header box) and the toolbar slides up over the list's bottom edge. Status / Assignee / Priority open a menu above the bar and apply to every selected row at once; the danger-toned Delete sits apart behind a divider. The list owns the selection — the toolbar just reports clicks.
Composition
The toolbar is position: absolute, centered over the bottom of its nearest positioned ancestor — wrap your list in a relative container, or pass fixed to pin it to the viewport in a full-page view. It renders nothing while count is 0 and slides up 12px on entry (skipped under prefers-reduced-motion).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | Number of selected rows, shown as “N selected”. The toolbar renders nothing while 0. |
| actions | BulkAction[] | [] | Batch actions left to right: { id, label, icon?, onClick? } for plain buttons, plus items/menuLabel/onSelect for menu actions and danger for the divider-set destructive group. |
| actions[].items | BulkActionItem[] | — | Menu rows { id, label, color? | lead? } — the button grows a caret and opens the menu above the bar. |
| actions[].onSelect | (item) => void | — | A menu item was chosen — apply it to every selected row. |
| actions[].danger | boolean | false | Danger text + danger-soft hover, rendered after a divider. |
| onDismiss | () => void | — | Clear-selection × clicked (also fired by Escape while the bar has focus). |
| countLabel | string | "selected" | Noun after the count. |
| fixed | boolean | false | Pin to the viewport instead of the nearest positioned ancestor. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the toolbar element, including ref. |
Usage
Show only applicable actions
Offer the operations that make sense for the current selection. Hide or disable ones that don't apply to every row.
Block the content
Float the bar over the bottom with breathing room; don't cover the rows people are trying to review.
Keep the count and a clear
Always show how many are selected and a one-click way to deselect — Escape should clear too.
Delete without confirmation
For irreversible batch actions, confirm first. The convenience of bulk shouldn't make mistakes easy.
Keyboard & accessibility
The bar is a labelled toolbar; the “N selected” count is a polite live region. Every action is a real button with the 3px themed ring, batch menus build on the registry Menu (Arrow keys, Enter, Escape), and Escape on the bar fires onDismiss. Pair the list side with a tri-state select-all checkbox, as in the demo above.