Hold to confirm
A React component in Beamline's Actions category, in the free sample.
Confirms a costly action by holding instead of clicking: a fill sweeps across while held and drains if let go early; pointer, touch, Space and Enter all hold.
Use it for
- Destructive actions where an accidental click is costly and a dialog would interrupt: delete a workspace, cancel an order.
Not for
- Frequent actions (the hold becomes a tax).
- Actions people must be able to do without holding: pair it with another route where that matters (alert-dialog).
Anatomy
- button
- fill
- icon
- label
- hint for screen readers
Variants
- tone: danger, neutral
- size: sm, md, lg
States
- idle
- holding
- confirmed
- disabled
Keyboard
- Hold Space or Enter
- releasing early cancels
Motion
While held, a fill of the control's own colour (a quarter strength; ink at a seventh for neutral) sweeps from the inline start, linearly, for exactly the hold time, so its edge is the progress; let go early and it drains back over --pui-duration-standard. Confirmed keeps it full and the label slides to the result. Reduced motion keeps the sweep (it is information); the drain and label swap become instant.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
confirmedLabel | string | "Done" | |
onConfirm | () => void | — | |
duration | number | 1200 | |
tone | "danger" | "neutral" | "danger" | |
confirmed | boolean | — | |
onHoldChange | (holding: boolean) => void | — | |
style / ref | CSSProperties / native Ref | — | native HTMLButtonElement |
classNames | HoldToConfirmClassNames | — |
Dependencies
lucide-react, motion
Import
import { HoldToConfirm } from "@/components/hold-to-confirm/hold-to-confirm";Get it
Hold to confirm is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Hold to confirm is in the free sample, which costs nothing. Get Beamline · Connect your agent
More in Actions
- Button: The action control: five weights and a brand fill, a buy/sell tone, sm/md/lg and a 44 px touch size, icon-only, a loading state that keeps its size and…
- Confirm morph: A destructive action that asks in place: the button morphs into its question, then into working, then into the result with Undo or Retry, without a dialog.
- Copy button: Copies a value and confirms in place: the icon becomes a check and the label says Copied; a refused copy says so instead of pretending.
- Split button: One obvious action joined to a menu of close alternatives; both halves are real buttons and the menu uses the shared menu rows.
- Swipe actions: Row actions behind a swipe on touch screens, mirrored in a menu at the row's end for pointer and keyboard; a full swipe runs the edge action.
- Theme switch: The light/dark control: the page changes in one of four transitions starting from the button (reveal, eclipse, split, rise), and the icon turns between…