Toast · Smallest

Default

Call toast() with a message from anywhere. Mount Toaster once at the app root; toasts stack bottom right and close after 5 seconds.

Types

toast.success, toast.info, toast.warning and toast.error add a matching leading icon.

import { Button, toast } from "@smallest-inc/ui";

export default function ToastTypes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="secondary" onClick={() => toast.success("Agent deployed")}>
        Success
      </Button>
      <Button variant="secondary" onClick={() => toast.info("A new voice model is available")}>
        Info
      </Button>
      <Button variant="secondary" onClick={() => toast.warning("You have used 90% of your call minutes")}>
        Warning
      </Button>
      <Button variant="secondary" onClick={() => toast.error("Could not save the prompt")}>
        Error
      </Button>
    </div>
  );
}

Description

Pass description for one supporting sentence under the message.

Action

Pass actionProps for one quick, reversible follow-up such as Undo. The action also closes the toast.

Close button

Pass closeButton for a toast that should stay until it is dismissed, usually with timeout: 0.

Dark

toast.dark uses a translucent black surface for clear separation from a busy or light page.

Position

Pass position for one of four viewports. Pick one that stays clear of the task's primary controls and keep it stable across a product area.

import { Button, toast, type ToastPosition } from "@smallest-inc/ui";

const positions: { position: ToastPosition; label: string }[] = [
  { position: "top-center", label: "Top center" },
  { position: "top-right", label: "Top right" },
  { position: "bottom-center", label: "Bottom center" },
  { position: "bottom-right", label: "Bottom right" },
];

export default function ToastPositionExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {positions.map(({ position, label }) => (
        <Button key={position} variant="secondary" onClick={() => toast.success("Prompt saved", { position })}>
          {label}
        </Button>
      ))}
    </div>
  );
}

Timed progress

toast.progress fills the toast as its timeout runs down. Use it only when the remaining time matters.

Loading

Pass type: "loading" and timeout: 0 for work in flight, then update the same toast with toastManager.update when it settles.

import { Button, toast, toastManager } from "@smallest-inc/ui";

export default function ToastLoading() {
  return (
    <Button
      variant="secondary"
      onClick={() => {
        const id = toast("Deploying Support agent…", { type: "loading", timeout: 0 });
        window.setTimeout(() => {
          toastManager.update(id, { title: "Support agent deployed", type: "success", timeout: 5000 });
        }, 2000);
      }}
    >
      Deploy agent
    </Button>
  );
}

Best practices

When to use

Use for brief, non-blocking feedback after an action completes or changes state: “Agent deployed”, “Prompt saved”.
Use inline validation for field errors, a Notification for persistent items and Dialog for a decision that must block the page.

Behavior

Mount Toaster once at the app root and call toast() from anywhere. Toasts stack bottom right and close after 5 seconds.
Choose one position per product area so feedback does not jump around; top-center, top-right, bottom-center and bottom-right are supported.
Pass actionProps only for a quick, reversible follow-up (Undo). Pass closeButton with timeout: 0 for a toast that must stay until dismissed.
For work in flight use type: "loading" with timeout: 0, then update the same toast to success or error instead of stacking a second one.
Use toast.progress only for a deliberately short-lived message where the remaining time matters.

Content

Name the result in sentence case, past tense, without a trailing period: “Agent archived”, “Could not save the prompt”.
Use toast.success / info / warning / error to match the outcome; add a description only for one supporting sentence.

Accessibility

Toasts are announced politely; never put the only copy of important information or the only path to an action in a toast.