Yugen UI

Toast

Toast là thông báo ngắn, không chặn thao tác, xuất hiện ở góc màn hình rồi tự biến mất.

Đặt <Toaster /> một lần ở gốc ứng dụng, rồi gọi dispatchToast từ useToast() (hoặc helper toast()). Mỗi toast có intent (info / success / warning / error) với icon giống MessageBar, tiêu đề, nội dung, một hành động và nút đóng. Vuốt để đóng; trỏ chuột vào sẽ tạm dừng đếm giờ; F8 để focus vùng thông báo.

    Import

    Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

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

    Biến thể

    Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

      Intent

      info, success, warning, error — cùng icon và màu với MessageBar.

        Vị trí

        Toaster position: top-start, top, top-end, bottom-start, bottom, bottom-end (mặc định).

          Không tự đóng & đóng bằng code

          timeout: -1 giữ toast tới khi người dùng hoặc code đóng.

          Cách dùng

          Nên
          • Dùng cho phản hồi ngắn sau hành động: đã lưu, đã gửi, đã xoá (kèm Hoàn tác).
          • Giữ tiêu đề ngắn gọn; nội dung tối đa 1–2 dòng.
          • Lỗi cần xử lý ngay nên để timeout -1 hoặc dùng MessageBar / Dialog.
          Không nên
          • Không đặt thông tin quan trọng duy nhất trong toast — nó sẽ biến mất.
          • Không hiển thị dồn dập nhiều toast cho cùng một sự kiện.
          • Không đặt form hay nhiều hành động trong toast.

          Props

          Prop · KiểuMặc địnhMô tả
          Toaster.position"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"Mặc định: "bottom-end"Vị trí vùng thông báo.
          Toaster.toasterIdstringMặc định: —Định danh khi có nhiều Toaster; dùng cùng useToast(toasterId).
          Toaster.limitnumberMặc định: 5Số toast hiển thị cùng lúc.
          useToast(toasterId?){ dispatchToast, dismissToast, dismissAllToasts }Mặc định: —API mệnh lệnh; dispatchToast trả về id. Hàm dispatchToast import thẳng từ gói đã lỗi thời (bỏ ở 1.0): dùng toast() hoặc useToast().dispatchToast.
          intent"info" | "success" | "warning" | "error"Mặc định: "info"Icon và màu icon.
          title / bodyReactNodeMặc định: —Tiêu đề (body1 semibold) và nội dung.
          action{ label: string; altText?: string; onClick?: () => void }Mặc định: —Hành động dạng link ở góc phải tiêu đề.
          timeoutnumberMặc định: 3000Thời gian tự đóng (ms); -1 = không tự đóng.
          toastId / onDismiss / dismissiblestring / () => void / booleanMặc định: — / — / trueid cố định, callback khi đóng, hiện nút X. Tên cũ hideDismiss đã lỗi thời (bỏ ở 1.0).

          Messages

          Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

          Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

          messages.toast

          Khoá · KiểuMặc định (tiếng Anh)messagesVi
          regionstring

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

          		Mặc định (tiếng Anh)"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).

          		Mặc định (tiếng Anh)"Notifications ({hotkey})"messagesVi"Thông báo ({hotkey})"
          dismissstring

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

          		Mặc định (tiếng Anh)"Dismiss notification"messagesVi"Đóng thông báo"