Components
Loading preview...
Delete button that expands to show a confirmation button with smooth animations.
@moumensoliman
npx shadcn@latest add https://21st.dev/r/moumensoliman/delete-buttonimport { 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>
)}
</>
);
}