Hold to delete: the key sinks onto its plate, a signal tint sweeps across it, the bin lid lifts and a 12-node meter lights a node per tenth. Release early and nothing happens; finish and it confirms, then offers Undo for five seconds.
pnpm dlx shadcn@latest add @beautiful-ui-pro/confirm-buttonNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Import it and pass your content. The props that matter most are listed next.
"use client";
import { ConfirmButton } from "@/components/ui/notchset/confirm-button";
/** Soft delete with an undo window; delete for good when it expires. */
export function DeleteAgent({ agentId, markDeleted, restore, deleteForever }: { agentId: string; markDeleted: (id: string) => void; restore: (id: string) => void; deleteForever: (id: string) => void }) {
return (
<ConfirmButton
target="PLANNER-V13"
labels={{ hold: "DELETE AGENT" }}
onConfirm={() => markDeleted(agentId)}
onUndo={() => restore(agentId)}
onExpire={() => deleteForever(agentId)}
/>
);
}holdMs–
numberHow long to hold (ms). Default 1200.
undoMs–
numberHow long Undo stays (ms). Default 5000; 0 for none.
target–
stringWhat is deleted, for the help line and its announcement.
onConfirm–
() => voidCalled when the hold completes.
onUndo–
() => voidCalled when Undo is pressed.
onExpire–
() => voidThe undo window ran out: the deletion is final.
labels–
Partial<ConfirmButtonLabels>Every word, for other languages.
components/ui/notchset/confirm-button.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.