Action Bar

A floating bar for bulk actions on selected rows that expands from a compact pill, built from Another UI primitives.

Invoices

Select rows to act on several at once.

Invoice	Client	Amount	Status	Assignee
INV-1038 Harbour Coffee Co. Retainer	Harbour Coffee Co.	$1,850.00	Paid	Ava Chen
INV-1039 Northwind Dental	Northwind Dental	$2,400.00	Overdue	Liam Patel
INV-1040 Fraser Valley Rentals Project	Fraser Valley Rentals	$960.00	Sent	Maya Singh
INV-1041 Acme Supply Retainer	Acme Supply	$4,800.00	Sent	Ava Chen
INV-1042 Globex Studio	Globex Studio	$1,275.00	Draft	Noah Brooks
INV-1043 Cedar & Pine Law Q4	Cedar & Pine Law	$3,150.00	Draft	Ethan Ward

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/action-bar.json

Features

Appears with the selection. The bar rises in from below as soon as a row is selected and sinks away when the selection clears. It sits sticky at the bottom of its own frame, so it never covers the rest of the page.
Compact, then expanded. It starts as a "3 invoices selected" pill. Open it to see the actions. Its width and height tween between states with the transitions.dev card resize, and each state swaps in through a soft blur.
Panels inside the bar. Actions can open a panel in place of a popover, such as a row of status chips or a searchable list of people. A back button returns to the actions.
Inline confirmation. Destructive actions ask first inside the bar ("Delete 3 invoices?"), use the destructive variant, and the demo offers Undo in a toast.
More menu. Extra actions live in a menu that opens upward.
Phones. On narrow frames the actions drop their labels and show icons with tooltips.
Keyboard. The bar is a toolbar. Tab moves through the actions. Escape steps back: out of a panel, then collapses the bar, then clears the selection.
Sounds. Cuelume plays when the bar appears, on actions, and when a change lands.
Reduced motion. The rise and the resize switch off when the system asks for less motion.

Usage

import { ActionBar, type ActionBarAction } from "@/components/blocks/action-bar"

const actions: ActionBarAction[] = [
  {
    id: "status",
    label: "Change status",
    icon: CircleHalfTiltIcon,
    panel: (done) => <StatusChips onPick={(s) => { setStatus(s); done() }} />,
  },
  { id: "export", label: "Export", icon: DownloadIcon, onSelect: exportCsv },
  {
    id: "delete",
    label: "Delete",
    icon: TrashIcon,
    destructive: true,
    confirm: { title: `Delete ${selected.size} invoices?`, action: "Delete" },
    onSelect: deleteSelected,
  },
]
 
<div className="sticky bottom-3 h-16">
  <ActionBar
    className="absolute inset-x-0 bottom-2"
    count={selected.size}
    noun={["invoice", "invoices"]}
    actions={actions}
    more={[{ id: "pdf", label: "Download PDFs", icon: FilePdfIcon, onSelect: downloadPdfs }]}
    onClear={() => setSelected(new Set())}
  />
</div>

Props

count. How many rows are selected. The bar shows while this is above zero.
noun. The word for the count, as [one, many].
actions. Each action has an id, label and icon, and one of onSelect, panel or confirm. Set destructive for the destructive variant.
more. Extra actions for the More menu.
onClear. Called by the X button and by Escape when the bar is collapsed.
defaultExpanded. Start expanded instead of as a compact pill.

AI Chat Notion