Sheet 05 · Components

Hold

People press and hold until the fill completes. Letting go early cancels.

Fig. 03

Await log waiting for you to try it

Installation

npx shadcn add @sureui/confirm-button

Usage

<ConfirmButton gesture="hold" variant="destructive" onConfirm={revoke}>  Hold to revoke</ConfirmButton>

Props

Name	Type	Default
onConfirm	() => void \| Promise<unknown>	required
gesture	"click" \| "click-again" \| "hold"	"click"
duration	number	1200, min 800
announcements.hold	string	"Press and hold to confirm"
onCancel	() => void	—
undo	boolean \| number	—
...props	Button props	—
data-state	"idle" \| "armed" \| "holding" \| "undo" \| "pending"	"idle"

onConfirm: () => void | Promise<unknown>; Default: required
gesture: "click" | "click-again" | "hold"; Default: "click"
duration: number; Default: 1200, min 800
announcements.hold: string; Default: "Press and hold to confirm"
onCancel: () => void; Default: —
undo: boolean | number; Default: —
...props: Button props; Default: —
data-state: "idle" | "armed" | "holding" | "undo" | "pending"; Default: "idle"

When to use it

Use it when

Reach for something else when