/// Overlay
ActionBar
A contextual bulk-action bar that slides up when rows are selected — an "N selected" count, action buttons, and a clear control.
import { ActionBar } from "@protocore/pds";Bulk selection
Feed count the number of selected items; the bar appears whenever it's above zero and slides up from the bottom. Pass action buttons as children and an onClear to render the clear control. It's built to pair with DataTable row selection.
When to use it
An ActionBar is the bulk-operation surface for a selectable list or table: the user checks a few rows and a bar rises with the operations that apply to the whole selection — export, archive, delete, assign. Keeping those actions in a floating bar avoids repeating them per row and makes the selected count unmistakable.
By default the bar shows when count > 0; pass visible to control it explicitly (for example, to keep it mounted through an exit transition). Wire onClear back to your selection state so the clear control empties it. For a persistent, non-contextual set of controls above content, use a [Toolbar](/navigation/toolbar) instead.
Usage
Do
- Drive count from your selection state and let the bar show itself.
- Wire onClear back to reset the selection.
- Put only actions that apply to the whole selection in the bar.
- Pair it with DataTable's selection for a complete bulk-edit flow.
Don't
- Leave it visible with an empty selection — it's contextual, not a toolbar.
- Overflow it with every possible action; keep it to the common few.
- Use it for single-row actions — those belong in the row.
- Forget onClear — users need an obvious way out of a selection.
Accessibility
| Keys | Action |
|---|---|
| Tab | Moves through the action buttons and the clear control. |
| Enter / Space | Activates the focused action. |
- The bar is a role=region labelled "Bulk actions" so assistive tech can find it.
- The count label is an aria-live=polite region, announcing selection changes.
- The clear control is a labelled button with an inline SVG × (no emoji glyph).
- Actions are real buttons — fully keyboard-operable.
ActionBar props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Action buttons — typically Buttons or IconButtons. |
className | string | — | |
clearLabel | string | Clear | Label for the clear control. |
count * | number | — | Number of selected items — drives the count label and default visibility. |
onClear | (() => void) | — | Called when the user clears the selection. Renders a clear control when set. |
position | enum | bottom | Which edge the bar docks to. |
renderCount | ((count: number) => ReactNode) | — | Renders the count label. Defaults to `"{count} selected"`. Return a full string, e.g. `(n) => \`${n} rows\``. |
style | CSSProperties | — | |
visible | boolean | — | Force visibility. When omitted, the bar shows whenever `count > 0`. Set explicitly to keep it mounted during an exit transition or hide it early. |