Vibeset

Hold button

For things that cannot be undone or that cost money, an "Are you sure?" gets answered without being read. Holding for a while forces you to mean it: the gesture is the confirmation. Progress is driven by a requestAnimationFrame that writes a CSS variable, not React state. There are two layers with the same label, one on top of the other with the top one clipped to where the fill has got to, so the text always reads. And three usage details: a short tap warns instead of doing nothing, the hint is linked for screen readers, and it can draw a visible route to confirm without holding, because holding excludes anyone without a steady hand.

And the React Bits original: Hold Button

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

When to use it

For destructive or costly actions, where asking "are you sure?" is not enough. No dialogs in between.

Watch out for

Holding demands a steady hand: always provide another way to confirm for anyone who cannot. And tell the user they have to hold, because nobody guesses it.

Accessibility

Five aria signals and keyboard. Reduced motion appears with a single reference: check that the wave also switches off.