Toast Undo Pattern - Smoothie Design System

← Patterns

Smoothie Patterns Toast Undo Pattern

Delete with Undo

Trigger a destructive action and show a toast with undo option.

Delete Item

// User deletes item, shows toast with undo
toast.show('Item deleted', {
  duration: 5000,
  actionText: 'Undo',
  onAction: () => restoreItem()
});
                    

Archive with Undo

Archive action pattern with 5-second undo window.

Archive Task

// Archive a task with quick undo
toast.show('Task archived', {
  duration: 5000,
  actionText: 'Restore',
  onAction: () => unarchiveTask()
});
                    

Clear History

Clear action with confirmation toast.

Clear All

// Clear all items with undo option
toast.show('History cleared (15 items)', {
  duration: 10000,
  actionText: 'Undo',
  onAction: () => restoreAllItems()
});
                    

Best Practices

Use for destructive actions (delete, archive, clear)
Provide 3-10 second undo window (default 5s)
Use clear action label ("Undo", "Restore", "Recover")
Auto-dismiss after timeout if not undone
Dismiss immediately after action confirmed