# Undo Button

An action with a window to take it back.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/undo-button
```

## Usage

```tsx
import { UndoButton } from '@/components/fetaui/undo-button'

export function Example() {
  return <UndoButton label="Archive" doneLabel="Archived" onCommit={archive} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | Archive |
| doneLabel | string | Archived |
| icon | ReactNode |  |
| seconds | number | 5 |
| onCommit | () => void |  |
| onUndo | () => void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For actions that are easy to undo, like archive.

## When not to use

- For actions that cannot be undone: use a dialog or Hold To Confirm.

## 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.