Hold to Confirm
A tactile confirmation button that requires users to press and hold for a specified duration before triggering an action. Use for destructive or irreversible actions where a click is too easy to make by accident. Features smooth fill animations and keyboard support (Space / Enter).
Preview
Installation
npx shadcn@latest add "https://flow-kit-beta.vercel.app/r/hold-to-confirm.json"API Reference
HoldToConfirm
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Required | Content displayed inside the button and within the animated fill overlay. |
| onConfirm | () => void | Required | Callback function triggered when the hold duration completes. |
| holdDuration | number | 1000 | Duration in milliseconds required to hold before confirmation triggers. |
| className | string | undefined | Additional CSS classes for the button container. |
| fillClassName | string | "bg-red-100 text-red-600 dark:bg-red-800 dark:text-red-50" | CSS classes for the animated progress fill overlay and text. |
Also accepts all standard button HTML attributes (except style) via ...props. Supports keyboard interaction (Space and Enter keys) to hold and confirm, and includes screen reader support via aria-describedby.