Yugen UI

Avatar

Avatar đại diện cho một người hoặc một thực thể bằng ảnh, chữ cái đầu hoặc icon.

Luôn truyền name thật — dùng để sinh chữ cái đầu, màu (colorful) và nhãn cho trình đọc màn hì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 { Avatar } 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.

Kích thước

20, 24, 32 (mặc định), 40, 48, 64, 96.

Màu

neutral (mặc định), brand, colorful (màu ổn định theo hash của name).

Presence

available, busy, away, offline.

Shape

circular cho người; square cho nhóm, ứng dụng, bot.

Cách dùng

Nên
  • Dùng color="colorful" khi có nhiều người cạnh nhau để dễ phân biệt.
  • Dùng square cho thực thể không phải người.
Không nên
  • Không truyền name rỗng hoặc giả.
  • Không tự đặt màu nền avatar bằng className.

Props

Prop · KiểuMặc địnhMô tả
namestringMặc định: —Bắt buộc. Sinh initials, màu và aria-label.
srcstringMặc định: —Ảnh đại diện; fallback về initials nếu lỗi.
size20 | 24 | 32 | 40 | 48 | 64 | 96Mặc định: 32Kích thước px.
color"neutral" | "brand" | "colorful"Mặc định: "neutral"Bảng màu.
shape"circular" | "square"Mặc định: "circular"Hình dạng.
presence"available" | "busy" | "away" | "offline"Mặc định: —Chấm trạng thái.