Toast

import { Toaster, toast, useSonner } from "@nyte-ai/ui/sonner";

Transient notifications. @nyte-ai/ui/sonner re-exports sonner, so sonner owns the lifecycle and the API below is sonner's.

No Nyte styling here. Pass toastOptions={{ unstyled: true }} to Toaster and supply your own classes.

Usage

• Mount Toaster near the root of the app. One unnamed toaster renders every toast. Give it an id and route toasts to it with toasterId when you need more than one.
• Call toast from anywhere, including outside React. It is a plain function, not a hook.
• Give a repeated notification a stable id so a second call updates the open toast instead of stacking another one.
• Every call that opens a toast returns its id. Pass it to toast.dismiss to close that one, or call toast.dismiss() with no argument to close all of them.

Exports

Examples

Mounting the toaster

<Toaster
  position="bottom-right"
  offset={16}
  gap={8}
  expand
  closeButton
  containerAriaLabel="Notifications"
  icons={{ success: <CheckIcon />, error: <WarningIcon />, close: <XIcon /> }}
  toastOptions={{
    unstyled: true,
    closeButtonAriaLabel: "Dismiss notification",
    classNames: {
      toast: styles.toast,
      title: styles.title,
      description: styles.description,
      actionButton: styles.action,
      closeButton: styles.close,
    },
  }}
/>

Opening a toast

toast("Workspace saved");
toast.success("3 chats archived");
toast.error("Could not reach the server", { description: error.message });
toast.warning("This model is deprecated");

An action, and undo

toast.success("3 chats archived", {
  id: "archive",
  action: { label: "Undo", onClick: () => restore() },
  onAutoClose: () => commit(),
});

action and cancel take { label, onClick } or a React node when you want to render the button yourself.

Replacing an open toast

The same id updates the open toast in place.

toast.success(`${count} chats archived`, { id: "archive" });

A pending operation

toast.promise(save(), {
  loading: "Saving",
  success: "Saved",
  error: (err) => err.message,
});

Reading the open toasts

const { toasts } = useSonner();

Props

The API below is sonner's.

toast

message is a React node or a function returning one. data is ExternalToast.

ExternalToast

ToasterProps

Shapes

@nyte-ai/ui/sonner exports the types ExternalToast and ToasterProps. The names below appear in those types and are not exported.

Accessibility

• The toaster renders a region with aria-live="polite". A new toast is announced without moving focus.
• The region's accessible name is containerAriaLabel plus the hotkey, so a screen reader user hears how to reach the stack. customAriaLabel replaces that whole name.
• The hotkey expands the stack and moves focus to the list. Escape collapses it again while focus is still inside.
• A close button needs a name. Set closeButtonAriaLabel in toastOptions.
• A loading toast carries no close button and no timer. Replace it or dismiss it by id.
• A toast is not a dialog. Do not put the only path to an action in one, since it closes on a timer.