Delete ButtonA red button that starts a five-second delete countdown, with a one-tap undo.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/delete-buttonFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.
Get MCPAdd your token to your MCP server config so installs authenticate as your account:
AICANVAS_TOKEN=aic_••••••••About Delete Button
Delete Button turns a destructive action into a single morphing pill instead of a confirm dialog. Click it and the red button reshapes into a soft-red "Cancel Deletion" pill with a live five-second countdown badge that rolls down digit by digit, plus an undo arrow. Let it run out and the pill settles into a muted "Account Deleted" state before resetting; tap undo at any point and it springs straight back to default. Framer Motion drives the shape-morph between all three pills with one shared layout transition. It is a calmer alternative to a browser confirm() for account deletion, removing a project, or any other destructive action.
Built with
Frequently asked questions
- Is Delete Button free to use?
- Yes. Delete Button is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Delete Button?
- One command: npx shadcn@latest add https://aicanvas.me/r/delete-button.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Delete Button for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Delete Button built with?
- Delete Button is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Delete Button?
- Common uses include Account settings, Admin panel, and Confirmation flow. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Delete Button with AI?
- Yes. Delete Button ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas