Toast

Import

import { toast } from "@retents/ui/sonner"

Usage Guidelines

When to use

• For transient, non-blocking feedback after an action (e.g., "Changes saved", "Item deleted", "Email sent").
• When the notification should auto-dismiss after a few seconds and not require user action.
• For success, error, or informational messages that don't need to persist on the page.

When NOT to use

• For persistent messages that must stay visible — use Alert instead.
• For blocking confirmations before destructive actions — use AlertDialog instead.
• For messages that require the user to act (e.g., undo) — use a toast with an action button, but prefer a full Alert if the undo window is important.

Preview

Setup

Mount the Toaster component once in your root layout:

import { Toaster } from "@retents/ui/sonner"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Usage

import { toast } from "@retents/ui/sonner"

// Basic
toast("Event has been created")

// With description
toast("Event has been created", {
  description: "Sunday, December 03, 2024",
})

// Variants
toast.success("Changes saved successfully.")
toast.error("Something went wrong.")

Peer dependencies

This component requires: sonner, next-themes

Source