Yugen UI

Toast

Toast is a short, non-blocking notification that appears in a corner of the screen and dismisses itself.

Place <Toaster /> once at the app root, then call dispatchToast from useToast() (or the toast() helper). Each toast has an intent (info / success / warning / error) with the same icons as MessageBar, a title, a body, one action and a close button. Swipe to dismiss it; hovering pauses the timer; F8 moves focus to the notification region.

    Import

    Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

    TSX
    // npm install yugen-uiimport { Toaster, useToast, toast } from "yugen-ui";

    Variants

    Each tile is a standalone example: hover to copy, or press Code to see the source.

      Intent

      info, success, warning, error, with the same icons and colors as MessageBar.

        Position

        Toaster position: top-start, top, top-end, bottom-start, bottom, bottom-end (default).

          No auto-dismiss & dismiss from code

          timeout: -1 keeps the toast open until people or your code dismiss it.

          Usage

          Do
          • Use it for short feedback after an action: saved, sent, deleted (with Undo).
          • Keep the title short and the body to 1–2 lines.
          • For errors that need attention right away, set timeout to -1 or use MessageBar / Dialog.
          Don't
          • Don't put important information only in a toast. It disappears.
          • Don't fire a burst of toasts for the same event.
          • Don't put a form or several actions in a toast.

          Props

          Prop · TypeDefaultDescription
          Toaster.position"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"Default: "bottom-end"Position of the notification region.
          Toaster.toasterIdstringDefault: —Identifier when there are several Toasters; use it with useToast(toasterId).
          Toaster.limitnumberDefault: 5Number of toasts shown at once.
          useToast(toasterId?){ dispatchToast, dismissToast, dismissAllToasts }Default: —Imperative API; dispatchToast returns the id. The dispatchToast function imported straight from the package is deprecated (removed in 1.0): use toast() or useToast().dispatchToast.
          intent"info" | "success" | "warning" | "error"Default: "info"Icon and icon color.
          title / bodyReactNodeDefault: —Title (body1 semibold) and body.
          action{ label: string; altText?: string; onClick?: () => void }Default: —Link-style action to the right of the title.
          timeoutnumberDefault: 3000Time before the toast closes on its own (ms); -1 = never.
          toastId / onDismiss / dismissiblestring / () => void / booleanDefault: — / — / trueFixed id, callback on dismiss, shows the X button. The old name hideDismiss is deprecated (removed in 1.0).

          Messages

          Text built into the component: labels, aria-labels, screen reader announcements.

          English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

          messages.toast

          Key · TypeDefault (English)messagesVi
          regionstring

          Tên vùng thông báo cho trình đọc màn hình.

          		Default (English)"Notifications"messagesVi"Thông báo"
          regionHotkeystring

          Tên vùng kèm phím tắt nhảy tới; {hotkey} được thay bằng phím tắt (F8).

          		Default (English)"Notifications ({hotkey})"messagesVi"Thông báo ({hotkey})"
          dismissstring

          Nhãn nút đóng từng toast.

          		Default (English)"Dismiss notification"messagesVi"Đóng thông báo"