Confirm-before-destroy without the modal

The default pattern for destructive actions is a confirm modal: click Delete, get a modal asking "are you sure?", click again. It works, but it interrupts every flow — including the ones where the user is certain.

A better pattern: turn the button itself into the confirmation.

Before

The classic two-click flow:

1. User clicks Delete
2. Modal appears: "Are you sure you want to delete this row?"
3. User clicks Confirm
4. Modal dismisses, row is deleted

Every step costs attention. The modal forces a focus shift, often covers the thing being deleted, and trains users to click through warnings without reading.

After

Two-step inline confirmation:

1. User clicks Delete → button transforms in place to Click again to confirm (red, with a 3-second auto-revert)
2. User clicks again within the window → action executes

Try it — the demo below runs the exact code on the Code tab:

Why it works

Users who are certain pay the cost of one extra click in the same spot. Users who clicked by mistake see the state change, get the 3-second window to not click again, and their action quietly cancels.

When not to use it

This pattern is for reversible destructive actions (deleting a row, archiving a record, removing an item). For irreversible ones — wiping an account, sending a payment, posting a final journal — keep the modal. The friction is the point.

Variant: hold-to-confirm

For higher-stakes actions, replace "click twice" with "hold for 2 seconds." The button fills with a progress bar while held. Same idea, more force required, more deliberate.