Toast

You might be looking for:

• Tooltip

  A short hover or focus label — no interactive content.

• Hover Card

  A richer preview on hover — name, type, extra lines.

• Popover

  Click to open a surface with interactive content.

• Info Callout

  An info icon that opens a title and description.

Usage

Mount one toaster near the root of the app. Call toast from anywhere after that.

import { Toaster, toast } from "@sophic/portal-ui/components/ui/sonner";

<Toaster />

toast.success("Saved", {
  description: "Preferred name updated.",
});

toast.error("Could not save", {
  description: "Try again in a moment.",
});

toast("Removed from list", {
  action: {
    label: "Undo",
    onClick: () => toast.success("Restored"),
  },
});

Use a toast for feedback that does not need a decision. Prefer Confirm Dialog when the person must choose yes or no, and Info Callout when a label needs an explanation that stays on the page.

Changelog

• 30 September 2026 — Documented. Full notes