Sonner Toast Patterns

# Sonner Toast Patterns for Google Antigravity IDE

Build elegant notifications with Sonner using Google Antigravity IDE. This guide covers toast types, customization, and promise handling patterns.

## Basic Setup

```typescript
// src/components/providers/toast-provider.tsx
"use client";

import { Toaster } from "sonner";
import { useTheme } from "next-themes";

export function ToastProvider() {
  const { theme } = useTheme();

  return (
    <Toaster
      theme={theme as "light" | "dark" | "system"}
      position="bottom-right"
      richColors
      closeButton
      duration={4000}
      toastOptions={{
        classNames: {
          toast: "bg-background border-border",
          title: "text-foreground",
          description: "text-muted-foreground",
          actionButton: "bg-primary text-primary-foreground",
          cancelButton: "bg-muted text-muted-foreground",
          closeButton: "bg-background border-border",
        },
      }}
    />
  );
}
```

## Toast Utilities

```typescript
// src/lib/toast.ts
import { toast } from "sonner";
import { CheckCircle, XCircle, AlertCircle, Info, Loader2 } from "lucide-react";

export const showToast = {
  success: (message: string, options?: { description?: string }) => {
    toast.success(message, {
      description: options?.description,
      icon: <CheckCircle className="h-4 w-4 text-green-500" />,
    });
  },

  error: (message: string, options?: { description?: string }) => {
    toast.error(message, {
      description: options?.description,
      icon: <XCircle className="h-4 w-4 text-red-500" />,
    });
  },

  warning: (message: string, options?: { description?: string }) => {
    toast.warning(message, {
      description: options?.description,
      icon: <AlertCircle className="h-4 w-4 text-yellow-500" />,
    });
  },

  info: (message: string, options?: { description?: string }) => {
    toast.info(message, {
      description: options?.description,
      icon: <Info className="h-4 w-4 text-blue-500" />,
    });
  },

  loading: (message: string) => {
    return toast.loading(message, {
      icon: <Loader2 className="h-4 w-4 animate-spin" />,
    });
  },

  promise: <T,>(
    promise: Promise<T>,
    messages: {
      loading: string;
      success: string | ((data: T) => string);
      error: string | ((error: Error) => string);
    }
  ) => {
    return toast.promise(promise, messages);
  },

  action: (
    message: string,
    options: {
      action: { label: string; onClick: () => void };
      cancel?: { label: string; onClick?: () => void };
    }
  ) => {
    toast(message, {
      action: {
        label: options.action.label,
        onClick: options.action.onClick,
      },
      cancel: options.cancel,
    });
  },

  dismiss: (id?: string | number) => {
    toast.dismiss(id);
  },
};
```

## Usage Examples

```typescript
// src/components/UserActions.tsx
"use client";

import { showToast } from "@/lib/toast";
import { deleteUser, updateUser } from "@/api/users";

export function UserActions({ userId }: { userId: string }) {
  const handleDelete = async () => {
    showToast.promise(deleteUser(userId), {
      loading: "Deleting user...",
      success: "User deleted successfully",
      error: (err) => "Failed to delete: " + err.message,
    });
  };

  const handleUpdate = async (data: UpdateUserData) => {
    const toastId = showToast.loading("Updating user...");

    try {
      await updateUser(userId, data);
      toast.dismiss(toastId);
      showToast.success("User updated", { description: "Changes have been saved" });
    } catch (error) {
      toast.dismiss(toastId);
      showToast.error("Update failed", { description: error.message });
    }
  };

  const handleUndoDelete = () => {
    showToast.action("User deleted", {
      action: {
        label: "Undo",
        onClick: () => restoreUser(userId),
      },
      cancel: {
        label: "Dismiss",
      },
    });
  };

  return (
    <div className="flex gap-2">
      <button onClick={handleUpdate}>Update</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}
```

## Custom Toast Content

```typescript
// src/components/CustomToast.tsx
import { toast } from "sonner";

export function showNotificationToast(notification: Notification) {
  toast.custom(
    (t) => (
      <div className="flex items-start gap-3 p-4 bg-background border rounded-lg shadow-lg">
        <img src={notification.user.avatar} alt="" className="w-10 h-10 rounded-full" />
        <div className="flex-1">
          <p className="font-medium">{notification.user.name}</p>
          <p className="text-sm text-muted-foreground">{notification.message}</p>
        </div>
        <button onClick={() => toast.dismiss(t)} className="text-muted-foreground hover:text-foreground">
          X
        </button>
      </div>
    ),
    { duration: 5000 }
  );
}
```

## Best Practices for Google Antigravity IDE

When using Sonner with Google Antigravity, use promise toasts for async operations. Add undo actions for destructive operations. Customize styling to match your theme. Keep messages concise. Let Gemini 3 generate toast patterns for your actions.

Google Antigravity excels at implementing user feedback with Sonner.