Action Bar

ProNew

A floating toolbar for bulk actions that appears when items are selected, announces the count and clears with Escape.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it above a selectable list or table when several rows can be acted on together: archive, move, delete, export.

Do not use it for per-row actions (use a row menu) or when only one item can be selected.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/action-bar

Usage

API

ActionBar

Prop	Type	Default	Description
`count`	`number`	-	Selected items. The bar shows while above 0.
`onClear`	`() => void`	-	Called by Clear and by Escape.
`noun`	`string`	`item`	Singular noun for the count.
`label`	`string`	`Bulk actions`	Accessible name of the toolbar.
`children`	`ReactNode`	-	The action buttons.

Accessibility

The bar has role="toolbar" and a label; a separate polite status region announces "3 files selected" with the right plural.
Nothing is rendered at zero, so there is no empty control.
The slide-in is off under prefers-reduced-motion.

Keyboard

Key	Action
Tab	moves across the actions and Clear
Escape	clears the selection

Testing

The component ships a Testing Library test (action-bar.test.tsx) that covers hiding at zero, the announcement and plural, clearing and a selectable list.

Guide and examples

When to use it

Use it above a selectable list or table when several rows can be acted on together: archive, move, delete, export.

Do not use it for per-row actions (use a row menu) or when only one item can be selected.

Installation


pnpm dlx shadcn@latest add @tealmac-pro/action-bar

Usage

API

ActionBar

Prop	Type	Default	Description
`count`	`number`	-	Selected items. The bar shows while above 0.
`onClear`	`() => void`	-	Called by Clear and by Escape.
`noun`	`string`	`item`	Singular noun for the count.
`label`	`string`	`Bulk actions`	Accessible name of the toolbar.
`children`	`ReactNode`	-	The action buttons.

Accessibility

The bar has role="toolbar" and a label; a separate polite status region announces "3 files selected" with the right plural.
Nothing is rendered at zero, so there is no empty control.
The slide-in is off under prefers-reduced-motion.

Keyboard

Key	Action
Tab	moves across the actions and Clear
Escape	clears the selection

Testing

The component ships a Testing Library test (action-bar.test.tsx) that covers hiding at zero, the announcement and plural, clearing and a selectable list.