The Complete Production SOP: How to Deploy and Run Sonner Opinionated Toast Notification System in Autonomous AI Agents

---
name: "sonner-toast-notifications"
description: "Display stackable, beautiful toast alerts with action buttons and promise state handling."
metadata:
  author: "Emil Kowalski"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "show toast with sonner"
  - "toast promise async sonner"
  - "custom action button toast sonner"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { Toaster } from 'sonner';
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster richColors position="top-right" closeButton expand={false} />
      </body>
    </html>
  );
}

'use client';
import { toast } from 'sonner';

export function DeleteButton({ itemId, onDelete, onRestore }: { itemId: string; onDelete: (id: string) => Promise<void>; onRestore: (id: string) => Promise<void> }) {
  const handleDelete = async () => {
    await onDelete(itemId);
    toast('Item deleted', {
      action: {
        label: 'Undo',
        onClick: () => {
          toast.promise(onRestore(itemId), {
            loading: 'Restoring item...',
            success: 'Item restored successfully!',
            error: 'Failed to restore item.',
          });
        },
      },
    });
  };

  return (
    <button onClick={handleDelete} className="btn-danger">
      Delete Item
    </button>
  );
}