Toast
A lightweight toast notification system for displaying temporary alerts. Supports multiple positions, auto-dismissal, and custom content rendering.
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 };
Textarea
An auto-resizing textarea component for multi-line text input. Includes support for validation error states, accessible labeling, and custom styling.
Tooltip
An informational tooltip component that appears on hover or focus. Fully accessible with smart positioning to keep content visible within the viewport.