Sonner Custom Toast

Component 8

About

A button that triggers a custom Sonner toast notification showing an avatar, message preview, and a reply action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sonner Custom Toast to your project and fits it to your theme.

Code

How Sonner Custom Toast is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect } from "react";
import { toast, Toaster } from "sonner";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function Default() {
  useEffect(() => {
    const id = toast.custom(
      (t) => (
        <div className="bg-background flex items-start rounded-lg shadow-sm border gap-4 p-4 w-[320px]">
          <Avatar className="mt-0.5">
            <AvatarImage src="https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg" alt="Sarah" />
            <AvatarFallback>SM</AvatarFallback>
          </Avatar>
          <div>
            <div className="text-sm font-medium">New message from Sarah</div>
            <p className="text-muted-foreground text-sm">
              Hey! Are you available for a quick call?
            </p>
            <Button
              className="mt-2"
              variant="outline"
              size="sm"
              onClick={() => toast.dismiss(t)}
            >
              Reply
            </Button>
          </div>
        </div>
      ),
      { duration: Infinity },
    );
    return () => toast.dismiss(id);
  }, []);

  const handleNotification = () => {
    toast.custom((t) => (
      <div className="bg-background flex items-start rounded-lg shadow-sm border gap-4 p-4 w-[320px]">
        <Avatar className="mt-0.5">
          <AvatarImage src="https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg" alt="Sarah" />
          <AvatarFallback>SM</AvatarFallback>
        </Avatar>
        <div>
          <div className="text-sm font-medium">New message from Sarah</div>
          <p className="text-muted-foreground text-sm">
            Hey! Are you available for a quick call?
          </p>
          <Button
            className="mt-2"
            variant="outline"
            size="sm"
            onClick={() => toast.dismiss(t)}
          >
            Reply
          </Button>
        </div>
      </div>
    ));
  };

  return (
    <div className="flex min-h-64 w-full items-center justify-center bg-background text-foreground">
      <Button variant="outline" onClick={handleNotification}>
        Custom Toast
      </Button>
      <Toaster />
    </div>
  );
}