# Undo Countdown Button

> Undo countdown button for React and Tailwind CSS (shadcn/ui) that turns into an "Undo · 5s" control with a shrinking countdown bar after a click and only commits the action when the window closes. It is built to make destructive or irreversible actions safe without a confirmation dialog, so people act first and can still change their mind. An undo button is a button that delays its side effect for a short window during which the user can cancel; this one runs the countdown with the Web Animations API, rewinds the bar when you click again or press Escape, shows a Restored flash, then a Done check with an accent color before returning to idle. Supports undoWindow and resetAfter timing, onStart, onCommit and onUndo callbacks, controlled state, default, destructive and outline variants, three sizes, keyboard activation, aria-live announcements, and reduced motion. Use it for delete, send, archive, publish, and payment actions in SaaS apps, email clients, and admin dashboards. The included demo scripts three sample actions; the component makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Button, Animation, Form, Micro Interaction
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/undo-countdown-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/undo-countdown-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/button.md