Sonner Toast

Buttons 9

About

A button that triggers a Sonner toast notification with a description and an undo action.

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

Code

How Sonner 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 Toast1 from "@/components/ui/toast1";
import { toast, Toaster } from "sonner";

export default function Default() {
  useEffect(() => {
    const id = setTimeout(() => {
      toast("Event has been created", {
        description: "Sunday, December 03, 2023 at 9:00 AM",
        action: {
          label: "Undo",
          onClick: () => console.log("Undo"),
        },
      });
    }, 120);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="relative flex min-h-[340px] w-full items-center justify-center gap-6 bg-background p-8">
      <Toast1 />
      <Toaster position="bottom-center" />
    </div>
  );
}