Open experiment
Hold-to-confirm button
A temporal confirmation primitive for irreversible operations. Holding pointer or Space charges a safety rail; releasing early or pressing Escape cancels, while a completed hold confirms exactly once.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-hold-confirm" data-state="idle" style="--cmp-progress: 0%">
<div class="cmp-hold-confirm__head"><span>Safety interlock</span><b aria-hidden="true"></b></div>
<button type="button" aria-describedby="cmp-hold-confirm-help">
<i aria-hidden="true">×</i><span>Hold to delete project</span>
</button>
<div
class="cmp-hold-confirm__rail"
role="progressbar"
aria-label="Confirmation hold progress"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
>
<i></i>
</div>
<p id="cmp-hold-confirm-help" class="cmp-hold-confirm__status" aria-live="polite">
Press and hold for 1.2 seconds · Escape cancels
</p>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Space provides the same timed hold behavior as pointer press.
- The progressbar and live status report active, cancelled, and confirmed states.
- Escape cancels an active hold without firing the destructive result.
License: MIT License for open-source use, modification, and distribution.