Toast

A short message that slides in at the corner to say something just happened, then goes away on its own.

ui.toastcomponents/ui/toast.tsx

Use case

For the AI

Use a toast to confirm an action the person just took when the page itself does not show it: the invoice was sent, the quote was saved, the card was declined. Call toastManager.add({ title, description, type }) from the handler; type picks the icon (success, error, warning, info, loading), and actionProps adds one button such as Undo. It needs ToastProvider mounted once around the app.

Use it when

Confirming a send, a save or a delete
An error from an action the person just took
Offering Undo right after a change
News that does not need the person to stop

Use something else when

A condition that lasts while the page is open (the site is down, a certificate runs out): Alert
Asking before an action that cannot be undone: Alert dialog and confirm
The status of a record in a list: Badge
Explaining a control when the pointer rests on it: Tooltip

Examples

They stack at the corner and can be swiped away

Code

Import

import type { ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { ToastProvider, toastManager } from "@/components/ui/toast"

Usage

export function Providers({ children }: { children: ReactNode }) {
  return <ToastProvider>{children}</ToastProvider>
}

export function SendInvoiceButton({ onUndo }: { onUndo: () => void }) {
  return (
    <Button
      onClick={() =>
        toastManager.add({
          title: "Invoice sent",
          description: "The client will get it in a minute.",
          type: "success",
          actionProps: { children: "Undo", onClick: onUndo },
        })
      }
    >
      Send Invoice
    </Button>
  )
}

Rules

Mount ToastProvider once, high in the layout (bottom-right by default); toastManager.add then works from any handler.
A toast goes away on its own (5 seconds by default) and can be swiped away: never use one for something the person must act on later, which is an Alert.
The title says what happened in a few words, in sentence case (Invoice sent); the description adds one sentence at most.
type matches the outcome: success, error, warning, info, or loading while the work runs, then toastManager.update(id, ...) turns that same toast into the result.
An action is one button, its label in Title Case (Undo), passed as actionProps: { children, onClick }.