BulkActionsBar
The selected count, a way to clear the selection and the actions that apply to every selected item.
| Invoice | Customer | Amount | |
|---|---|---|---|
| INV-1042 | Northwind | $1,250.00 | |
| INV-1043 | Globex | $860.00 | |
| INV-1044 | Initech | $2,400.00 | |
| INV-1045 | Umbrella | $310.00 |
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add bulk-actions-barDependencies
What add bulk-actions-bar installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/button
Examples
2 examples · 1 component| Invoice | Customer | Amount | |
|---|---|---|---|
| INV-1042 | Northwind | $1,250.00 | |
| INV-1043 | Globex | $860.00 | |
| INV-1044 | Initech | $2,400.00 | |
| INV-1045 | Umbrella | $310.00 |
Selection in a table
Select rows to show the bar; Archive removes them and Clear selection returns focus to the select-all checkbox.
Count with context
label adds the total; the same text is announced.
API reference
Configured through props: pass the selected count and the clear handler, and the actions as children.
| Prop | Type | Default |
|---|---|---|
countHow many items are selected. At 0 the bar is not rendered. | number | — |
onClearClears the selection. Move focus back to a sensible place, such as the select-all checkbox. | () => void | — |
childrenThe bulk actions, usually small Buttons. | ReactNode | — |
labelThe count text, also announced. Use it for "3 of 24 selected" or for translations. | (count: number) => ReactNode | count => `${count} selected` |
clearLabelText of the clear button. | ReactNode | "Clear selection" |
aria-labelNames the group of actions. | string | "Bulk actions" |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Empty | count is 0: nothing visible, the status region is empty. |
| Selected | The count, the actions and Clear selection; the count is announced. |
| Cleared | onClear runs and the bar is removed; focus goes where onClear puts it. |
Accessibility
The count is announced through a role="status" region that stays mounted outside the bar, so screen readers hear "3 selected" as the selection changes, even when the bar first appears.
The bar is a labelled role="group" ("Bulk actions") and does not take focus when it appears: the user keeps working on the checkboxes and reaches the actions with Tab.
Clearing the selection removes the bar, so its button disappears. Return focus in onClear, for example to the select-all checkbox.
Place it right before the table in the DOM, so Tab reaches the actions before the rows. Give it the space of your toolbar (render the toolbar only while count is 0, in a slot of the same height) or make it sticky, so the rows don't move under the pointer when it appears. Keep BulkActionsBar itself mounted: unmounting it also removes the region that announces the count.
Confirm destructive actions, for example with ConfirmAction, and say how many items they affect.