Hold confirm

A button you press and hold to confirm: a fill sweeps across while you hold, drains back if you let go early and fires the action when it is full.

enhancer
button
confirm
hold
delete
progress
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Hold confirm example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<button type="button" data-motion="hold-confirm">Hold to delete</button>

import { HoldConfirm } from "./motion/react/HoldConfirm";

<HoldConfirm>Your content</HoldConfirm>

<script setup lang="ts">
import HoldConfirm from "./motion/vue/HoldConfirm.vue";
</script>

<template>
  <HoldConfirm>Your content</HoldConfirm>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "hold-confirm";

The wrappers: HoldConfirm.tsx (React, TypeScript) and HoldConfirm.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-hold`	`1200`	how long to hold
`data-motion-done`	`Deleted`	the label once confirmed
`data-motion-color`	`#d63c41`	the fill

- It stays a real button; a hidden hint ("Press and hold to confirm") describes it. Holding Space or Enter fills it just as holding the pointer does, and letting go early cancels. - When it is full a confirm event fires, a polite announcement says the done label, and the button reads as disabled for three seconds. - A long press on touch screens does not open the context menu while it fills. - Reduced motion shows a half fill while you hold instead of the sweep; the hold time is the same. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

hold-confirm.js is 1.2 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.