Toasts

Usage and anatomy

Render one Toaster near the root of the application, then call the matching toast method from an event or application workflow. Each method receives a title followed by a supporting message.

import { Toaster, toast } from "@acme/ui/toast"

export function App() {
  return (
    <>
      <button onClick={() => toast.success("Changes saved", "Your settings are up to date.")}>
        Save changes
      </button>
      <Toaster />
    </>
  )
}

Choose the toast type that matches the outcome so the icon and color communicate the same status as the copy.

API reference

toast

Toaster

Toaster accepts Sonner's Toaster props. Notifications remain visible for 8000 milliseconds by default; pass duration to override that value.