Toast
An opinionated toast component for React.
Basic Usage
"use client";
import { Button } from "@repo/ui/components/button";
import { toast } from "sonner";
export const Example1 = () => {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
);
};
Types
"use client";
import { Button } from "@repo/ui/components/button";
import { toast } from "sonner";
export const Example2 = () => {
return (
<div className="flex gap-2">
<Button
variant="outline"
onClick={() => toast.success("Event has been created")}
>
Success
</Button>
<Button
variant="outline"
onClick={() => toast.info("Event has been created")}
>
Info
</Button>
<Button
variant="outline"
onClick={() => toast.warning("Event has been created")}
>
Warning
</Button>
<Button
variant="outline"
onClick={() => toast.error("Event has not been created")}
>
Error
</Button>
</div>
);
};
Promise
"use client";
import { Button } from "@repo/ui/components/button";
import { toast } from "sonner";
export const Example3 = () => {
return (
<Button
variant="outline"
onClick={() =>
toast.promise(
new Promise((resolve) => setTimeout(resolve, 2000)),
{
loading: "Loading...",
success: () => {
return `Toast has been added`;
},
error: "Error",
},
)
}
>
Show Promise Toast
</Button>
);
};
Custom Position
"use client";
import { Button } from "@repo/ui/components/button";
import { toast } from "sonner";
export const Example4 = () => {
return (
<div className="grid grid-cols-3 gap-2">
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "top-left",
})
}
>
Top Left
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "top-center",
})
}
>
Top Center
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "top-right",
})
}
>
Top Right
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "bottom-left",
})
}
>
Bottom Left
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "bottom-center",
})
}
>
Bottom Center
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
position: "bottom-right",
})
}
>
Bottom Right
</Button>
</div>
);
};
Component Code
"use client";
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from "lucide-react";
import { Toaster as Sonner, ToasterProps } from "sonner";
const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
theme="system"
className="toaster group"
toastOptions={{
classNames: {
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
},
}}
icons={{
success: <CircleCheckIcon className="size-4" />,
info: <InfoIcon className="size-4" />,
warning: <TriangleAlertIcon className="size-4" />,
error: <OctagonXIcon className="size-4" />,
loading: <Loader2Icon className="size-4 animate-spin" />,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
{...props}
/>
);
};
export { Toaster };