Back to product momentsMotion Pack 19 · Feedback
Delete confirmation
A high-risk action stays controllable through a clear target, hold progress, and completion feedback.
Previous draftArchived yesterday
Build a delete confirmation: clearly show the target, require holding Hold to delete for about 600ms, show progress fill while held, then retain accessible completion copy and an Undo entry. Provide a reduced-motion treatment.
Input feedbackHold to confirmHold progress turns a high-risk action into deliberate, cancellable confirmation.TimingDurationA fixed 600ms hold duration communicates the confirmation threshold.State changeText morphBefore-and-after deletion copy updates in the same explanatory area.Reduced motionReduced motionReduced motion retains hold duration, deletion result, and Undo.
Motion rules
Hold progress shows that confirmation is underway, then provides a clear result.
Reduced motion
Keep hold duration, result copy, and Undo while omitting fill animation.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.