Selection toolbar
ProA contextual batch action surface that appears when items are selected.
Pattern · live
- Bulk actions for checkbox-selectable tables or grids.
- Floating bars that appear only while items are selected.
- Use dropdown-menu for per-row actions.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use it next to selectable collections. Keep the count accurate and confirm destructive actions before applying them.
example.tsx
import { SelectionToolbar } from "@/components/arc/selection-toolbar/selection-toolbar"; export function ProjectsBar({ selected, clear }: { selected: string[]; clear: () => void }) { return ( <SelectionToolbar count={selected.length} noun="project" onClear={clear} actions={[ { label: "Archive", onClick: () => archive(selected) }, { label: "Delete", onClick: () => remove(selected), destructive: true }, ]} /> );}Built fromButtonSelection stateAction list
API reference
2 parts. The first is the root.
SelectionToolbar
A floating bar that appears while items are selected, showing a rolling count, bulk actions, and a clear button.
PropTypeDefaultDescription
countRequirednumber–Number of selected items. The bar mounts above 0 and leaves at 0.actionsRequiredSelectionAction[]–Bulk actions rendered as buttons after the count.onClearRequired() => void–Called by the clear button. Reset your selection here.nounstring"item"Singular noun; an s is added when count is not 1.SelectionAction
Action type: { label: string; icon?: ReactNode; onClick: () => void; destructive?: boolean }. label is also the React key, so keep labels unique.
No props.
- Tab
- Moves through the actions and the clear button.
- EnterorSpace
- Activates the focused button.
- The bar is role=toolbar labelled Selection actions.
- A visually hidden aria-live polite line announces the count, such as 3 projects selected; the animated count is aria-hidden.
- The clear button has aria-label Clear selection.
- The bar unmounts at count 0, so move focus back to the list yourself if it was inside the bar.
- The bar rises and scales in on a spring and sinks back faster when the selection clears.
- Digits roll in the direction of the change, the plural s fades in place, and the count's width springs so actions do not jump.
- Reduced motion uses plain fades and no width spring.
- Below 520px the bar goes full width and actions wrap onto a second row under the count.
- You position it yourself, for example fixed at the bottom center.
- The bar unmounts at count 0; a ResizeObserver springs the count width so actions do not jump.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use with checkbox-selectable tables and grids for bulk actions.
- Position it yourself (for example fixed at the bottom center); it has no default export, so import it by name.
The full library index for assistants is at /llms.txt.