Originals
Hold to confirm
For actions you can’t undo: the button fills with liquid while you hold it. Pressing splashes where your finger is, moving the pointer makes it slosh, letting go early drains it. At the top it overflows and confirms.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { HoldButton } from '@vizzele/react';
<HoldButton onConfirm={deleteProject} duration={1400}>
Hold to delete project
</HoldButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
onConfirm | () => void | — | Runs once the button is full. |
duration | number | 1400 | Hold time in ms. |
tone | 'danger' | 'liquid' | 'danger' | Red or iridescent liquid. |
resetAfter | number | 1600 | Drains and re-arms after confirming (0 = stays full). |
confirmedLabel | ReactNode | 'Confirmed' | Shown and announced when done. |
onProgress | (p: number) => void | — | 0–1 while filling or draining. |
Accessibility
- Hold Space or Enter to fill it from the keyboard.
- An aria-describedby hint says “Press and hold to confirm”; confirmation is announced politely.
- A tap never confirms by accident. Reduced motion: no waves, a steady fill.