Skip to content
Pinky UI

forms

Hold to Confirm

Sustained input confirms one rare consequential action.

  • forms
  • destructive
  • hold
  • safety

Live preview

Quick usage

usage
import { HoldToConfirm } from "@pinky-ui/systems";

<HoldToConfirm onConfirm={deleteProject}>Delete project</HoldToConfirm>

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

duration={900}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
durationnumber1200Required sustained intent in milliseconds.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Space/Enter and pointer/touch share completion and cancellation rules.
  • Reduced motion uses an explicit two-press confirmation.

Performance

  • Timers and progress interval are cleaned on cancel and unmount.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Rare irreversible actions

When not to use

  • Ordinary save, navigation, checkout or repetitive actions

Skill

Purpose

HoldToConfirm is reserved for consequential actions where sustained intent is genuinely useful, such as permanently deleting a project or stopping a critical process.

Do not use it for ordinary save, submit, navigation, purchase or repetitive actions. It is not a decorative progress button and must not replace a clear confirmation dialog when consequences need explanation.

Pointer, touch, Space and Enter can hold; early release cancels. Progress is explicit, disabled state is respected and reduced motion becomes a clear two-press confirmation. Keep duration near 0.8–1.5 seconds and explain the consequence beside the control.

Open this skill on its own page