Hold To Delete Button

A button that fills with a destructive color while held down, triggering the action only after the full hold duration completes. Releases cleanly if the user lets go early.

Features

CSS clip-path fill animation driven by hold duration — no jank.
Configurable hold and success display durations.
onDelete callback fires only on full completion.
Automatically resets after the success state.

Playground

Controls

Button label

Hold duration (ms)2000

Installation

npx shadcn@latest add @sona-ui/hold-to-delete-button

Usage


"use client";
 
import { toast } from "sonner";
import HoldToDeleteButton from "@/registry/sonaui/hold-to-delete-button/hold-to-delete-button";
 
export default function HoldToDeleteButtonDemo() {
  return (
    <div className="flex items-center justify-center py-12">
      <HoldToDeleteButton
        onDelete={() => toast.success("Successfully deleted")}
      />
    </div>
  );
}

Props

Property	Type	Default	Description
`label`	`string`	`—`	Text displayed inside the button.
`holdDuration`	`number`	`2000`	Duration in milliseconds the user must hold before the action triggers.
`successDuration`	`number`	`1200`	Duration in milliseconds the success state is visible before auto-resetting.
`onDelete`	`() => void`	`—`	Called once when the hold completes.
`className`	`string`	`—`	Additional CSS classes for the button.