Action BarNew

The bar that rises while rows are selected: the count, actions for them, and a way to clear.

$ pnpm dlx shadcn@latest add @dashral/action-bar

Invoice	Customer	Amount
INV-1048	Fernpay	$1,240.00
INV-1047	Cartwell	$860.00
INV-1046	Pagewell	$420.00
INV-1045	Driftbox	$2,180.00

Installation

$ pnpm dlx shadcn@latest add @dashral/action-bar

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/action-bar.json

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { ActionBar } from "@/components/dashral/action-bar"
3
4<ActionBar
5  open={selected.length > 0}
6  count={selected.length}
7  onClear={() => setSelected([])}
8  actions={<Button variant="ghost" size="sm" onClick={() => archive(selected)}>Archive</Button>}
9/>

Using the npm package? Import from @dashral/ui/components/action-bar instead, here and in the examples; the rest is the same.

Examples

In a card

position="inline" keeps it in the page's flow; label puts the count in your words.

Files

Q4-report.pdf

Contract-signed.pdf

Brand-guide.pdf

Invoices-2026.xlsx

1 file

API reference

ActionBar

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`open`	`boolean` Whether it shows: usually while something is selected. Required.	—
`count`	`number` How many are selected: "3 selected", in the locale's plural.	—
`label`	`ReactNode` In place of "3 selected".	—
`actions`	`ReactNode` The buttons for the selection. Required.	—
`onClear`	`() => void` Shows an × that clears the selection; Escape inside the bar calls it too.	—
`position`	`"fixed" \| "inline"` Floating at the bottom of the window, centred; or in the page's flow.	`"fixed"`
`aria-label`	`string` Names the toolbar.	`"Actions for the selection"`
`classNames`	`{ label, actions }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Into the bar's actions
`Escape`	Clear the selection (with onClear)

Accessibility

role="toolbar", named "Actions for the selection" (translated); the count is a live region, announced as it changes.
While closed it's inert: hidden from screen readers, out of the tab order, not clickable.
On a phone, give the action buttons an icon and an sr-only label so the bar stays one row.

Motion

Rises 16px and fades in on the spring (--duration-considered); leaves faster on --ease-exit. It keeps the last count while it leaves. With reduced motion it only fades.