Vibeset

Fuse button

Undo beats asking "are you sure?": it does not interrupt the person who got it right and rescues the one who did not. On press the action does not happen yet: a visible countdown starts, a fuse that burns down, and the action confirms itself when it ends. To be honest, onConfirmar is called once, when the fuse ends: an undo that undoes nothing because the action already went out on press is a lying ornament. Focus moves by itself to the Undo button (and Escape undoes too), because a keyboard user has just pressed a button that disappears. The countdown pauses on mouse hover and not on focus, or it would always stop. It is announced once to readers, not every second.

And the React Bits original: Fuse Button

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Fuse Button, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For actions that can be undone: archive, send, move. Undo beats asking "are you sure?": it does not interrupt the person who got it right.

Watch out for

The action fires on its own when the countdown ends: make the undo real (it must revert) and not just a button. And do not use it for anything irreversible.

Accessibility

Nine aria signals, keyboard and reduced motion. A countdown that commits on its own is hard for anyone who needs more time: check that it pauses on focus and not only on hover.