Sonner

1import {
2  CircleCheckIcon,
3  InfoIcon,
4  Loader2Icon,
5  OctagonXIcon,
6  TriangleAlertIcon,
7} from "lucide-react";
8import { Toaster as Sonner, type ToasterProps } from "sonner";
9
10const Toaster = ({ ...props }: ToasterProps) => {
11  return (
12    <Sonner
13      theme={"light"}
14      className="toaster group"
15      icons={{
16        success: <CircleCheckIcon role="status" aria-label="Success" className="size-4" />,
17        info: <InfoIcon role="status" aria-label="Info" className="size-4" />,
18        warning: <TriangleAlertIcon role="status" aria-label="Warning" className="size-4" />,
19        error: <OctagonXIcon role="status" aria-label="Error" className="size-4" />,
20        loading: <Loader2Icon role="status" aria-label="Loading" className="size-4 animate-spin" />,
21      }}
22      style={
23        {
24          "--normal-bg": "var(--popover)",
25          "--normal-text": "var(--popover-foreground)",
26          "--normal-border": "var(--border)",
27          "--border-radius": "var(--radius)",
28        } as React.CSSProperties
29      }
30      {...props}
31    />
32  );
33};
34
35export { Toaster };