Skip to Content
ComponentsSonner

Add <Toaster /> to your root layout so toasts are available throughout your application:

// app/layout.tsx
 
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Then call toast() from anywhere in your app:

import { toast } from 'sonner'

Default toast

toast("Event has been created.")

Success toast

toast.success("Changes saved successfully.")

Error toast

toast.error("Something went wrong.")

Promise toast

toast.promise(saveSettings(), {
  loading: "Saving...",
  success: "Settings saved.",
  error: "Failed to save settings.",
})

With description

toast("Event has been created.", {
  description: "Monday, January 3rd at 6:00pm",
})

With action

toast("Event has been created.", {
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
})
Last updated on
SpinnerAlert Dialog