Hold to confirm

Introduction

The Hold to Confirm example shows how to create a button that visually responds to a long press, before confirming an action.

In this tutorial, we'll learn how to use:

• useMotionValue to track the progress of holding the button
• useTransform to link animated values to that progress
• animate to animate the progress value

Get started

Let's start with the basic structure of our component:

"use client"

import { animate, motion, useMotionValue, useTransform } from "motion/react"

export default function HoldToConfirm() {
    return (
        <div style={styles.container}>
            <div style={styles.buttonWrapper}>
                <button style={styles.button}>
                    <div style={styles.buttonBackground} />
                    Hold to confirm
                </button>
            </div>
        </div>
    )
}

/** Copy styles from example source */

This gives us a simple button with some basic styling, but it doesn't have any interactive behavior yet.