# Undo toast (goodtabs UI)

A Sonner toast with an Undo action that either restores or commits the change.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/undo-toast.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/undo-toast`

## Usage

```tsx
import { undoToast } from "@/components/ui/undo-toast"

undoToast("Removed Motion references", {
  onUndo: () => restore(item),
  onCommit: () => api.delete(item.id),
})
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| message | `string` |  | First argument. The toast title. |
| onUndo | `() => void` |  | Runs when Undo is pressed. |
| onCommit | `() => void` |  | Runs once if the toast closes any other way. |
| description | `string` |  | Optional muted line. |
| duration | `number` | `6000` | Milliseconds before it closes. |

## When to use

- Reversible actions like removing, archiving or unpublishing
- Instead of a confirm dialog, which interrupts the flow

## When not to use

- Actions that cannot be reversed: ask first with an alert dialog
- Plain confirmations: use toast.success from the toaster

## Notes for agents

- Apply the change optimistically, then call undoToast; do the real delete in onCommit
- Needs the Toaster from the toaster item mounted once in the layout
- Exactly one of onUndo or onCommit runs. A dismissed toast counts as a commit
- Sonner makes the Undo button keyboard reachable and announces the toast

Docs: https://ui.goodtabs.co/components/undo-toast