‹ components

HoldToConfirm

draftv0.9.0·open in canvas

Press-and-hold control for irreversible actions. Progress fills while held; early release cancels. Interior hold-to-confirm contract, CSS-only.

Installnpx shadcn add @cids/hold-to-confirm
Live demo
Press and hold for 1.2 seconds to confirm. Releasing early cancels and nothing happens.

Motion · tap to replay

honors reduced-motion

Fill width via rAF + CSS `transition-[width]` 75ms; label opacity 150ms. Reduced-motion: global reset. No `motion` package.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { HoldToConfirm } from "@/design-system";

<HoldToConfirm
  duration={1400}
  confirmLabel="Disconnected"
  onConfirm={() => disconnectForever()}
>
  Hold to disconnect
</HoldToConfirm>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

idleholdingreleasingcommitteddisabled

Press-and-hold control for irreversible actions. Progress fills while held; early release cancels. Interior hold-to-confirm contract, CSS-only.

Anatomy

┌──────────────────────────┐
│████░░░░  Hold to confirm │ ← sell fill sweeps L→R while held
└──────────────────────────┘
  release early → drains · full hold → onConfirm once

Props

PropTypeDefaultNotes
onConfirm() => void—Fires once at full duration. Click never reaches it.
childrenReactNode—Resting label / accessible name.
onAbort() => void—Early release / stray click.
confirmLabelstring"Confirmed"Post-commit face + live region.
durationnumber1800ms of continuous hold.
resetAfternumber1600ms to hold confirmed before idle. 0 = stay.
releaseRatenumber2.5Drain speed vs fill.
disabledbooleanfalsearia-disabled (keeps focus).
classNamestring—cn-merged.

Motion

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.