A press-and-hold button that sweeps a progress fill and only fires its confirm callback after the full hold completes, guarding destructive actions against accidental clicks.
"use client"; import { HoldToConfirm } from "@/components/ui/hold-to-confirm"; export default function HoldToConfirmDemo() { return ( <div className="flex min-h-[220px] items-center justify-center"> <HoldToConfirm onConfirm={() => {}} confirmLabel="Workspace deleted"> Hold to delete workspace </HoldToConfirm> </div> ); }
Part of interior.dev — browse the full library on 21st.dev.