Actions

Bulk action bar

v1.2.1

Actions for every selected row of a table, floating at the bottom of the screen while a selection exists.

Quick usage

Not a shared component yet. It lives in features/dashboard/components/ShopEmployeePortal (.ledger-bulk-bar).

Live stage and code

The live component and its controls on the left, the code on the right; change a control and the code follows: Web TSX (the component in a working example), Tailwind and HTML (the markup it renders, with its data attributes), React Native, SwiftUI and Jetpack Compose. The header theme switch drives every stage.

Accessibility and touch

Its buttons are md 32px with the 44px target.

Bulk

Visible height 28px. The ::after boundary adds 8px above and below, so a gloved finger lands on a 44px target while the row keeps its density.

Do and avoid

3 selectedArchive

Do: float the bar on the surface radius with the popover shadow and neutral actions.

Avoid

3 selectedArchiveExport

Avoid: two terracotta actions in the bar. The accent is spent once per view.

Rules and constraints

Use it for

A table with row checkboxes where the same action applies to many rows.

Avoid

Never for a single-row action: that belongs in the row.
Never acting on rows hidden by the current search or filter.

Constraints

Destructive actions confirm once for the whole batch.
A floating surface: --bg-elevated, a hairline, --radius-surface, --shadow-popover.

More in Actions

ButtonsTrigger an action. Four variants chosen by what the action does, three heights chosen by where the button sits. A split button is the compound kind: one commit plus a menu of alternatives.CopyTokenOne click copies a high-value identifier and confirms it with a Copied! tooltip.ToggleSwitch one setting on or off immediately, with no Save step.