An action with a window to take it back.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/undo-buttonPlayground
No icon, 3 s window
Commit and undo
Disabled
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/undo-button
No icon, 3 s window
seconds sets the window. Without icon the label stands alone.
Motion
Accessibility
- Done is announced as a status.
- Focus returns to the button after Undo.
Motion
- The width eases over 320 ms.
- A 2 px bar drains and the seconds roll.
- With reduced motion, the bar still drains, because it is information.
Responsive behavior
- ⌘Z hides on touch screens.
Performance
- The drain bar is a CSS scale on the compositor, for the full window.
- The seconds tick runs only while the window is open, and the timers clear when it closes.
- The key listener exists only during the window.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/undo-button.
- Run the real action in onCommit, not on click. Use onUndo to restore anything you hid.
- If the button unmounts during the window, onCommit fires then. Only Undo cancels the action.
- Set seconds for the window, default 5. Ctrl Z and ⌘Z both undo while it is open, and the hint shows the one for the platform.
- The demo runs no action. Wire up onCommit and onUndo.
Related
Hold To ConfirmComponentPress and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.Alert DialogComponentA modal that interrupts with something important and waits for an answer.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Slide To ConfirmComponentDrag the thumb across to confirm. Past 90% or a fast flick, it commits.