Toast Notifications

Right now, when a user adds or deletes a todo, there's no feedback beyond the list updating. Toast notifications provide gentle confirmation that actions succeeded.

Set up the toast system

"Add a toast notification system to the app. Use react-hot-toast or build a simple custom one. When a todo is added, show a subtle success toast that says 'Task added.' When a todo is deleted, show 'Task deleted' with an 'Undo' button. When a todo is completed, show 'Task completed' with a checkmark. Toasts should appear at the bottom-right, stack if multiple appear, and auto-dismiss after 3 seconds."

Terminal

$npm install react-hot-toast

💡Info

react-hot-toast is a lightweight (under 5KB) toast library with a clean API. You can also ask Claude Code to build a custom toast system from scratch if you prefer zero dependencies.

How toasts work

A toast provider wraps your app (in the root layout)
Toast calls are triggered after actions (add, delete, complete)
The toast component renders the notification with animation
Auto-dismiss removes the toast after a timeout

Adding the provider

Claude Code will add the Toaster component to your root layout:

import { Toaster } from 'react-hot-toast'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster
          position="bottom-right"
          toastOptions={{
            duration: 3000,
            style: {
              background: 'rgb(var(--color-surface))',
              color: 'rgb(var(--color-text-primary))',
              border: '1px solid rgb(var(--color-border))',
            },
          }}
        />
      </body>
    </html>
  )
}

Triggering toasts

In your todo actions:

import toast from 'react-hot-toast'
 
// When adding a todo
toast.success('Task added')
 
// When deleting a todo
toast('Task deleted', {
  icon: '🗑',
  duration: 4000,
})
 
// When completing a todo
toast.success('Task completed')

The undo pattern

The delete toast is special — it should offer an undo option:

"When a todo is deleted, don't remove it immediately. Instead, show a toast with an 'Undo' button. If the user clicks Undo within 4 seconds, restore the todo. If they don't, permanently delete it."

✅Tip

The undo pattern is one of the best UX improvements you can make. It lets users act confidently — they can always reverse a mistake. Gmail uses this same pattern for email deletion.

Styling toasts to match your app

"Style the toasts to match our design system. Use our surface color for the background, our border color, and our text colors. The success icon should use our primary color. Add a subtle shadow for elevation. Make sure they look right in both light mode and dark mode (when we add it)."

⚠️Warning

Toasts should be informative but not disruptive. Keep the text short (under 5 words), auto-dismiss within 3-4 seconds, and position them where they won't cover important content.

Your app now gives users clear feedback on every action. Added a task? Confirmed. Deleted one? Confirmed, with a safety net. This is the kind of polish that makes users trust your app.