Yugen UI

PresenceBadge

PresenceBadge cho biết trạng thái hiện diện của một người: có mặt, bận, vắng mặt, ngoại tuyến…

Dùng icon presence của Fluent (đặc cho available, away, busy, do-not-disturb; viền cho offline, blocked, out-of-office và khi outOfOffice) và màu theo token trạng thái. role="img" với aria-label tiếng Việt. Thêm ring khi đặt chồng lên Avatar để tách khỏi ảnh.

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 { PresenceBadge } 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.

Có mặtVắng mặtBậnKhông làm phiềnNgoại tuyếnKhông ở văn phòngĐã chặnKhông xác định

Trạng thái

Tám trạng thái; luôn kèm chữ khi không gian cho phép (không chỉ dựa vào màu).

Out of office

outOfOffice đổi sang icon viền, giữ màu trạng thái (away/offline chuyển tím).

Kích thước

tiny 6px · extra-small 10 · small 12 · medium 16 (mặc định) · large 20 · extra-large 28.

Trên Avatar

ring tạo viền 2px màu nền; định vị bằng thuộc tính logical (-inset-e-px) để đúng cả RTL.

Cách dùng

Nên
  • Chọn size tương ứng với Avatar (Avatar 32 → small, 48 → medium, 64+ → large).
  • Bật ring khi đặt chồng lên ảnh/Avatar.
  • Hiện kèm chữ trạng thái ở danh sách, hồ sơ người dùng.
Không nên
  • Không đổi màu trạng thái theo brand.
  • Không dùng PresenceBadge cho trạng thái hệ thống (online/offline của máy chủ) — dùng Badge hoặc MessageBar.

Props

Prop · KiểuMặc địnhMô tả
status"available" | "away" | "busy" | "do-not-disturb" | "offline" | "out-of-office" | "blocked" | "unknown"Mặc định: "available"Trạng thái hiện diện.
outOfOfficebooleanMặc định: falseĐang nghỉ — icon viền, nhãn thêm "không ở văn phòng".
size"tiny" | "extra-small" | "small" | "medium" | "large" | "extra-large"Mặc định: "medium"6 / 10 / 12 / 16 / 20 / 28px.
ringbooleanMặc định: falseViền ring-2 ring-background-1 khi đặt trên Avatar.
labelstringMặc định: —Ghi đè aria-label (mặc định: "Có mặt", "Bận"…).

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.presenceBadge

Khoá · KiểuMặc định (tiếng Anh)messagesVi
availablestringMặc định (tiếng Anh)"Available"messagesVi"Có mặt"
awaystringMặc định (tiếng Anh)"Away"messagesVi"Vắng mặt"
busystringMặc định (tiếng Anh)"Busy"messagesVi"Bận"
doNotDisturbstringMặc định (tiếng Anh)"Do not disturb"messagesVi"Không làm phiền"
offlinestringMặc định (tiếng Anh)"Offline"messagesVi"Ngoại tuyến"
outOfOfficestring

Cũng được nối sau trạng thái chính (viết thường) khi bật outOfOffice.

Mặc định (tiếng Anh)"Out of office"messagesVi"Không ở văn phòng"
blockedstringMặc định (tiếng Anh)"Blocked"messagesVi"Đã chặn"
unknownstringMặc định (tiếng Anh)"Unknown"messagesVi"Không xác định"