Sonner Custom Color Toast

Buttons 2

About

A button that triggers a Sonner promise toast with custom loading, success, and error states and a custom accent color.

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

Code

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

export default function Default() {
  useEffect(() => {
    const id = setTimeout(() => {
      toast.success("Password changed successfully", {
        style: {
          "--normal-bg": "#0284c7",
          "--normal-text": "#ffffff",
          "--normal-border": "#0284c7",
          "--success-bg": "#0284c7",
          "--success-text": "#ffffff",
          "--success-border": "#0284c7",
        } as React.CSSProperties,
        duration: 100000,
      });
    }, 400);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="relative flex min-h-[240px] w-full items-center justify-center bg-background text-foreground">
      <ToastComponent />
      <Toaster position="bottom-right" />
    </div>
  );
}