React Bulk Action Bar

Copy Page

A batch operation applied to the wrong selection is one of the few genuinely unrecoverable mistakes a data tool lets you make. The undo window is the entire design.

Installation

Props

Undo, unless you cannot

destructive and irreversible are separate flags, and the distinction is the point.

A destructive action gets a two-step confirmation — the button changes to "Confirm — scrap 3" so the count is restated at the moment of commitment, which catches the case where the selection changed since you last looked.

An irreversible action additionally gets no undo affordance. Showing an Undo button for something that cannot be undone is worse than showing nothing: it invites a wrong assumption at exactly the moment the user is most anxious. Those actions carry a warning icon in the bar instead, and after they run the bar simply clears.

Everything else lands in an undo strip with a visible countdown. Eight seconds is short enough that your backend can hold a tombstone rather than a full transaction, and long enough for the "wait, that was the wrong filter" reflex.

contained pins the bar inside a positioned ancestor rather than the viewport, which is how the demo keeps it inside its own panel — and note the demo reserves space below the table so the bar never covers the final row.