Hold Button
Buttonsinline sandboxA confirmation button that fills up while being held, perfect for destructive or irreversible actions. Prevents accidental clicks by requiring a sustained press.
hold button
hold to confirm
confirmation button
destructive button
delete button
Preview
Add the shimmer keyframe animation to your globals.css for the shimmer effect during hold.
Uses cn() utility from shadcn/ui. Make sure you have it installed.
Installation
Use the shadcn CLI to install this component:
npx shadcn@latest add https://messyui.dev/r/hold-button.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Hold to Delete" | Text shown initially on the button |
| holdingLabel | string | "Keep holding..." | Text shown while the button is being held |
| completedLabel | string | "Deleted!" | Text shown after the action completes |
| holdDuration | number | 1500 | Duration in milliseconds to hold before action triggers |
| variant | "destructive" | "warning" | "default" | "destructive" | Visual style variant of the button |
| size | "sm" | "md" | "lg" | "md" | Size of the button |
| disabled | boolean | false | Whether the button is disabled |