Hold to confirmPro

• Destructive or expensive actions that shouldn't fire on a stray click: delete, release, wipe.

• Frequent actions: holding every time is slow.
• Actions that need explanation: use a confirm dialog.

Import it from @/components/ui/hold-to-confirm after installing.

import { HoldToConfirm } from "@/components/ui/hold-to-confirm";

export function DeleteProject({ id }: { id: string }) {
  return (
    <HoldToConfirm tone="destructive" onConfirm={() => deleteProject(id)} doneLabel="Deleted">
      Hold to delete
    </HoldToConfirm>
  );
}

• Described by a hidden hint: "Press and hold to confirm."
• Confirmation is announced politely.
• Works with keyboard holds, not just pointers.

• The fill grows linearly over the duration; releasing drains it in 350ms.
• Labels swap with a short blur and slide; the button presses in slightly while held.

• At least 176px wide; touch holds work and long-press menus are suppressed.

• The fill is a motion value; nothing re-renders per frame.

• Use for one action at a time; don't put several in a row.