MotionHold

Press and hold to confirm a destructive action; an early release rewinds.

WebReact NativeGestures

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useState } from 'react';
import { MotionHold, MotionSwap } from '@kkwaenggwari/animated-chorus';
import './styles.css';

export default function App({ duration = 1200 }) {
  const [deleted, setDeleted] = useState(false);

  return (
    <div className="stage">
      <div className="project">
        <MotionSwap value={deleted ? 'deleted' : 'live'} effect="up">
          {deleted ? 'Project deleted' : 'Project: Aurora'}
        </MotionSwap>
      </div>
      {deleted ? (
        <button className="restore" onClick={() => setDeleted(false)}>
          Restore project
        </button>
      ) : (
        <MotionHold
          className="hold"
          fillClassName="fill"
          duration={duration}
          onConfirm={() => setDeleted(true)}
        >
          Hold to delete
        </MotionHold>
      )}
      <p className="hint">Release early and the fill rewinds. Space and Enter work too.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 44px 20px;
}

.project {
  font:
    750 24px system-ui,
    sans-serif;
  color: #0e2e24;
}

.hold {
  position: relative;
  min-height: 52px;
  padding: 0 28px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #0e2e24;
  border-radius: 999px;
  background: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #43c58f;
}

.restore {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Shortest usage

Danger.jsx

<MotionHold duration={1200} onConfirm={deleteProject}>
  Hold to delete
</MotionHold>;

What it handles for you

The fill grows while the pointer, Space or Enter is held.
Releasing early rewinds the fill, and pressing again mid-rewind continues from the current fill.
The button presses in while held and pops once when confirmed.

Use it for

Delete a project.
Hold to pay.
Reset settings.

Props

Prop	Type	Default	Description
`children`	`ReactNode`		The button label.
`onConfirm`	`() => void`		Runs once the hold completes.
`duration`	`number`	`1200`	Milliseconds the press must be held.
`disabled`	`boolean`	`false`	Turns the button off.
`fillClassName`	`string`		Class for the growing fill; `fillStyle` sets its inline style.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

Style the fill with fillClassName or fillStyle; other props go to the button.

On React Native the accessibility activate action confirms directly, because holding is hard with assistive technology.

Used in these examples

Checkout summaryQuantities, line totals and the total roll as the cart changes; the coupon notice enters and leaves; paying takes a deliberate hold.MotionListMotionNumberMotionPresenceMotionHold