Skip to content

component

Hold Confirm

By BuiltByKern

Details

Summary

Hold Confirm is a utility CTA: press and hold to fill a progress ink under the label; release before the end and it snaps back (cancel).

Description

Hold Confirm is a utility CTA: press and hold to fill a progress ink under the label; release before the end and it snaps back (cancel). On seal it shows success feedback, fires onConfirm, then optionally opens a Link , scrolls to a Section , or stays sealed. Soft coral accent, BuiltByKern bone fill, dual-ink label, quiet hold pulse, and auto-reset by default so buyers can try again. Canvas-safe Preview modes, reduced-motion aware, zero packages beyond framer. Desktop hold / Space / Enter is the product — no Auto Demo. Features Hold-to-commit · release cancels (not hover fill) Linear hold progress + ease-out snap-back Success label crossfade + seal settle beat Soft auto-reset (default 1400ms; 0 = stay sealed) Optional tap-to-reset while sealed Action: Link → Section → onConfirm Soft coral #FF8A7A · dual-ink · pulse while holding Keyboard Space/Enter · reduced-motion · canvas Preview modes Zero external dependencies Setup Insert Hold Confirm (~208–280px wide) Content: label, success label, hold duration Action: Link and/or Section (+ optional New Tab) Wire onConfirm if needed Motion: Auto Reset / Tap Reset Look: bone + coral or your brand

Introduction

Hold to commit — release cancels.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400148688/148/228/309/79/15
  • All · #2864