03 / Controls

Hold Button

A confirmation button for actions that deserve a second thought. Release early to cancel, or activate once with a keyboard.

Source

Release early to cancel.

"use client"

import * as React from "react"
import { Check, RotateCcw } from "lucide-react"

import { HoldButton } from "mischief-ui/hold-button"

export function HoldButtonDemo() {
  const [removed, setRemoved] = React.useState(false)

  return (
    <div className="demo-content hold-demo">
      {removed ? (
        <>
          <span className="complete-icon">
            <Check aria-hidden="true" size={24} />
          </span>
          <strong>Download removed</strong>
          <p className="restored-message">The demo is ready to use again.</p>
          <button
            className="restore-button"
            type="button"
            onClick={() => setRemoved(false)}
          >
            <RotateCcw aria-hidden="true" size={15} /> Restore demo
          </button>
        </>
      ) : (
        <>
          <p className="restored-message">Release early to cancel.</p>
          <HoldButton
            aria-label="Remove download"
            onComplete={() => setRemoved(true)}
          >
            Hold to remove download
          </HoldButton>
        </>
      )}
    </div>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/hold-button

import { HoldButton } from "mischief-ui/hold-button"

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/hold-button/hold-button.tsx

1"use client"2 3import * as React from "react"4import { cn } from "@/lib/utils"5 6type HoldState = "idle" | "holding" | "complete"7 8export interface HoldButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {9  onComplete: () => void10  duration?: number11  completeLabel?: React.ReactNode12}13 14export const HoldButton = React.forwardRef<HTMLButtonElement, HoldButtonProps>(

Usage

export function RemoveDownload() {
  return (
    <HoldButton onComplete={removeDownload}>
      Hold to remove download
    </HoldButton>
  )
}

Why hold instead of confirm

A confirmation dialog asks a question the answer to which is almost always yes, and people learn to dismiss it without reading. A hold cannot be dismissed by reflex: it takes a second of deliberate, continuous pressure, and letting go early cancels it.

That makes it a good fit for the destructive action that is common enough to be annoying behind a dialog but severe enough that an accident matters -- deleting a draft, clearing a queue, revoking a key. It is a poor fit for anything irreversible and rare, where a dialog that names what is about to happen is still the right answer.

How long the hold is

The default is 900ms, which is long enough to feel like a decision and short enough not to feel broken. Shorter values are accepted but floored at 500ms, because below that the hold stops being deliberate and becomes a slow click -- exactly the reflex it exists to interrupt.

onComplete runs once, at the end of a full hold. Releasing early, dragging off the button, or pressing Escape all cancel it, and nothing is reported.

API

onComplete() => voidRuns once after a completed hold or keyboard activation.

durationnumberHold time in milliseconds. Defaults to 900, minimum 500.

completeLabelReactNodeContent shown after completion.

childrenReactNodeThe idle button content.

...buttonPropsButtonHTMLAttributesNative button attributes except pointer and click handlers.

Accessibility

Pointer users hold to confirm. Keyboard and assistive technology users activate the native button once, avoiding a timing barrier. Progress and completion are announced politely.