Toast

Installation

Wrap the app in the Toaster once. It provides the global toast manager and renders the viewport:

import { Toaster } from "@zynactra/ui/toast"

<body>
  <Toaster>{children}</Toaster>
</body>

Usage

import { toast } from "@zynactra/ui/toast"

const id = toast.add({
  title: "Project archived",
  description: "It's now read-only.",
  actionProps: { children: "Undo", onClick: () => toast.close(id) },
})

toast.promise(save(), {
  loading: "Saving changes...",
  success: "Saved.",
  error: "Couldn't save. Try again.",
})

For several independent queues, make one with createToastManager() and pass it to <Toaster toastManager={...}>. Inside components, useToastManager() gives the same API.

A 2px line along the bottom of each toast runs out with its timer. It pauses when the timer does: while you hover or focus the stack, during a swipe, and while the window is in the background. Loading toasts and toasts with timeout: 0 have none.

Examples

Error with retry

A failed background request: type: "error", timeout: 0 so it stays until dismissed, priority: "high" so screen readers announce it right away, and a Retry action.

Success or error from one handler

When the result decides the message, await the call and add the toast yourself. Disable the button while it runs.

Guidelines

• Offer undo for anything reversible instead of asking for confirmation first.
• One toast per action. Batch repeated events ("3 files uploaded"), don't stack them.
• Don't use toasts for errors in forms; show those next to the field with Field.
• Error toasts stay until dismissed (timeout: 0) and say what to do next. Success toasts time out.

API reference

Behaviour and props come from Base UI. See the Base UI Toast docs.