Sonner
An opinionated toast notification component built on Sonner.
Installation
npx radk-cli@latest add sonnerSetup
Add <Toaster /> to your root layout:
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
)
}Usage
import { toast } from "sonner"toast("Event has been created.")Examples
Default
toast("Event has been created.")With Description
toast("Event has been created.", {
description: "Monday, January 3rd at 6:00pm",
})Success
toast.success("Profile saved successfully.")Error
toast.error("Something went wrong.")Warning
toast.warning("Your session is about to expire.")With Action
toast("File deleted.", {
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})