component
Hold Confirm
By BuiltByKern

Details
- BuiltByKernAuthor
- componentType
- 2026-08-03Published
- 2026-09-11Updated
- 2026-08-03Added
- ButtonsCategories
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.
- All · #2864