Hold To Delete Button

Use Hold To Delete Button for a destructive action that needs a deliberate confirmation gesture. The destructive fill reaches completion only when the control is held for the configured duration.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Lucide Motion

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

Basic usage

delete-project.tsx

import HoldToDeleteButton from "@/components/ui/hold-to-delete-button/hold-to-delete-button";
 
export function DeleteProject() {
return <HoldToDeleteButton onDelete={() => console.log("Deleted")} />;
}

Examples

Adjust the hold duration to reflect the impact of the action. Release before completion to cancel, and use disabled when deletion is unavailable.

Usage


"use client";
 
import { toast } from "sonner";
import HoldToDeleteButton from "@/components/ui/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>
  );
}

API

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.
`disabled`	`boolean`	`false`	Whether the button ignores interaction.
`className`	`string`	`—`	Additional CSS classes for the button.

Accessibility

The control supports pointer capture and keyboard activation. Make the destructive result clear in the visible label and surrounding explanation.

Styling

Use the duration and class name options to match the context. Reduced-motion preferences retain the confirmation state without the animated fill.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI