Hold to confirm

Free

A destructive action that asks for intent, not a dialog. The fill soaks out from where you pressed, a countdown shows what is left, and releasing early drains it back.

Source packages/ui/src/hold-to-confirm.tsxDepends on none beyond ReactMotion 1.5 s hold · soak from the press

Production pipeline

rk_live_••••4f2a · last used today

Density

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/hold-to-confirm.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Use it for single, irreversible actions where a confirmation dialog would interrupt more than protect: revoking a key, ending a session.

onConfirm runs once, when the fill completes. The button then shows its done label and stays disabled.

Keyboard users hold Space or Enter; the description tells screen-reader users how it works.

revoke-key.tsx

import { HoldToConfirm } from "@/components/ui/hold-to-confirm"

export function RevokeKey({ id, onRevoke }) {
  return (
    <HoldToConfirm
      label="Hold to revoke key"
      doneLabel="Key revoked"
      onConfirm={() => onRevoke(id)}
    />
  )
}

Examples #

Revoke a key

Try releasing before the fill completes. Nothing happens.

API reference #

All props except onConfirm are optional.

PropTypeDefaultDescription

onConfirm() => void—Called once when the hold completes.

labelstring"Hold to confirm"Accessible label and visible text before completion.

doneLabelstring"Confirmed"Shown and announced after completion.

durationnumber1500How long to hold, in milliseconds.

childrenReactNode—Optional visible content instead of label.

Motion #

The fill grows from the press point at the hold's own pace and drains back on the settle curve if released. Under reduced motion the soak becomes four notches on the same clock, and the countdown is unchanged.

1500 mshold duration (duration prop)

linearfill progress

380 msdrain · ease-settle