Hold Confirm Button
Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels.
The Hold Confirm Button replaces a confirmation dialog with a deliberate gesture: hold to fill the progress sweep, release early to cancel. It supports pointer and keyboard holds.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/hold-confirm-button.json"Usage
tsx
import { HoldConfirmButton } from "@/components/godui/hold-confirm-button";tsx
<HoldConfirmButton onConfirm={deleteAccount}>Hold to delete</HoldConfirmButton>Examples
Variants and duration
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onConfirm | () => void | — | Fires once the hold completes |
variant | "destructive" | "default" | "destructive" | Visual style |
size | "sm" | "md" | "lg" | "md" | Padding and text size |
duration | number | 900 | ms the user must hold to confirm |
holdingLabel | ReactNode | "Confirming…" | Label while holding |
confirmedLabel | ReactNode | "Confirmed" | Label after confirming |