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
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 |