Delete Button

Buttons 263

About

Delete button that expands to show a confirmation button with smooth animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Delete Button to your project and fits it to your theme.

Code

How Delete Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { NativeDelete } from "@/components/ui/delete-button";
import { useState } from "react";

export default function DemoOne() {
  const [deleted, setDeleted] = useState(false);

  return (
    <>
      {!deleted ? (
        <NativeDelete
          onConfirm={() => {
            // Handle confirmation UI shown
            console.log("Confirm!")
          }}
          onDelete={() => {
            setDeleted(true);
            setTimeout(() => setDeleted(false), 2000);
          }}
        />
      ) : (
        <div className="text-sm text-muted-foreground">Deleted!</div>
      )}
    </>
  );
}