A button that triggers a custom Sonner toast notification showing an avatar, message preview, and a reply action.
"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://i.pravatar.cc/150?img=2" 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://i.pravatar.cc/150?img=2" 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>
);
}
Part of Shadcn UI Kit — browse the full library on 21st.dev.