Hold to confirm

Confirm a destructive action by holding, not tapping.

npx shadcn@latest add @silicon-ui/hold-to-confirm
holdlong pressconfirm
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/hold-to-confirm

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/hold-to-confirm/hold-to-confirm.tsx
    • components/silicon-ui/hold-to-confirm/hold-to-confirm.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { HoldToConfirm } from "@/components/silicon-ui/hold-to-confirm/hold-to-confirm";

API reference

PropTypeDefault
label*

The instruction and the action, for example “Hold to delete project”.

string—
onConfirm*

Called once when the hold completes.

() => void—
confirmedLabel

Shown once the hold completes, for example “Deleted”.

string"Done"
duration

Hold length in milliseconds.

number1200
iconReactNode<Trash2 strokeWidth={1.75} />
tone

`accent` (default) fills with the selected accent; `danger` is for an irreversible action; `neutral` fills with the foreground.

"accent" | "danger" | "neutral""accent"
confirmed

Controls the done state. Set it back to false to reset the button; leave it undefined to let the button keep its own state.

boolean—
onHoldChange

Reports when a hold starts and ends, for surrounding hints such as “Keep holding”.

(holding: boolean) => void—

Also accepts the props of ButtonHTMLAttributes<HTMLButtonElement>, except children, onClick, onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd.

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens