Interactive Component

Hold to Delete

A destructive action button that requires the user to press and hold to confirm deletion. Shows a progress bar during the hold duration with smooth state transitions.

Installation

npx shadcn@latest add https://atomixui.mihircodes.in/registry/hold-to-delete

How to use

'use client';

import { HoldToDelete } from '@/components/atomixui/hold-to-delete';

const HoldToDeleteDemo = () => {
    return (
        <div className="h-dvh bg-white text-black flex items-center justify-center">
            <HoldToDelete onDelete={() => console.log('deleted!')} onReset={() => console.log('reset!')} />
        </div>
    );
};

export { HoldToDeleteDemo };