Bulk Action Bar
Actions for selected rows, with keyboard shortcuts. Pro · Data and metrics › Tables
Floating toolbar for actions on selected rows: animates in when the selection starts, shows the count, primary actions with shortcut hints, an overflow menu and a clear button. A WAI-ARIA toolbar: one Tab stop, arrow keys move between controls.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add bulk-action-barnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { BulkActionBar } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
count * | number | Number of selected items; the bar shows while it is above zero. | |
total | number | Items available, for "3 of 120" and the Select all button. | |
actions * | BulkAction[] | Shown as buttons up to maxVisible; the rest go into the ⋯ menu. | |
maxVisible | number | 3 | Buttons before the overflow menu. Default 3. |
onClearSelection * | () => void | Clears the selection: the ✕ button and the Escape key. | |
onSelectAll | () => void | Adds "Select all {total}" while only part is selected. | |
position | 'sticky' | 'fixed' | 'static' | 'sticky' | sticky (default) floats at the bottom of the scroll container the bar is placed in, e.g. right after a table; fixed floats at the bottom of the viewport; static stays in the flow where it is placed and takes its own height (embedded in a panel, a card or a docs example). |
shortcuts | boolean | true | Keyboard shortcuts of the actions and Escape to clear. Default true. |
shortcutScope | RefObject<HTMLElement | null> | Area whose focus turns the shortcuts on, usually the table the selection belongs to. They also work from the bar itself and while nothing has focus; elsewhere on the page the keys do what they normally do. | |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's. | |
animation | 'default' | 'spring' | 'default' | spring: the selected count rolls to each new value (up as it grows, down as it shrinks). default: it just changes. |
labels | Partial<BulkActionBarLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Data Table — Tables with search and sorting
- Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
- Virtual List — Virtual list for 100,000 rows
- List Block — List with images or icons, descriptions and values
- Description List — Key–value list: stacked, inline or a grid with icons
- Tree View — Tree structures
- Accordion — Collapsible sections
- Sortable — Drag-and-drop sorting
- JSON Viewer — JSON viewer
- Timeline — Event timeline
- Card — All-purpose cards
- Item Card — Row card: icon, title, description and a control on the right
Previous: Virtual List · Next: List Block · All Data and metrics