Hold ToConfirm
A button that requires holding down to confirm irreversible or critical actions.
Confirm Payment
You are about to buy the Pro subscriptionfor $49.99. Hold the button below to confirm. This purchase will be processed securely.
Installation
npx shadcn@latest add https://scrollxui.dev/registry/hold-toconfirm.json
Usage
import { HoldToConfirm } from "@/components/ui/hold-toconfirm";
<HoldToConfirm
variant="style"
size="dimension"
duration={time}
onConfirm={callback}
animation="border-or-fill"
fillClassName="styles"
confirmedChildren={content}
confirmedClassName="styles"
resetAfter={time}
showProgressOnConfirm={boolean}
>
content
</HoldToConfirm>
Examples
Border Variant
Confirm Payment
You are about to buy the Pro subscriptionfor $49.99. Hold the button below to confirm. This purchase will be processed securely.
API Reference
Hold ToConfirm
A button that requires holding down to confirm irreversible or critical actions.