Persona

Persona ghép Avatar (hoặc chỉ chấm trạng thái) với tên và tối đa ba dòng thông tin phụ về một người.

Dùng trong danh sách người, thẻ hồ sơ, kết quả tìm kiếm. Kích thước Avatar và cỡ chữ đi theo size; textPosition và textAlignment điều chỉnh bố cục.

Nguyễn Văn AnTrưởng nhóm thiết kếHà Nội · 09:30

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

Trần Thị Bìnhextra-small

Trần Thị Bìnhsmall

Trần Thị Bìnhmedium

Trần Thị Bìnhlarge

Trần Thị Bìnhextra-large

Trần Thị Bìnhhuge

Kích thước

extra-small → huge; Avatar 20 → 64px.

Lê Hoàng Cườngafter

Lê Hoàng Cườngbefore

Lê Hoàng Cườngbelow

Vị trí chữ

after (mặc định), before, below.

Phạm Minh DũngQuản lý sản phẩmĐang họpRảnh lúc 15:00

Phạm Minh DũngQuản lý sản phẩm

Căn chữ & bốn dòng

textAlignment start (mặc định) bám mép trên Avatar; center căn giữa theo chiều dọc.

Hoàng Thu HàCó mặt

Vũ Quốc KhánhVắng mặt

Đặng Mai LinhNgoại tuyến

Chỉ trạng thái

presenceOnly thay Avatar bằng chấm trạng thái — hợp với danh sách dày.

Nguyễn Văn AnTrưởng nhóm thiết kế

Trần Thị BìnhẢnh không tải được

Bot phát hànhChạy mỗi đêm

Ảnh

avatar.src cho ảnh chân dung; ảnh không tải được thì quay về chữ viết tắt; shape square cho ứng dụng, bot.

Nguyễn Văn An, Trần Thị Bình và 3 người khácDuyệt thiết kế · 4 tệp

Nhóm phát hành3 thành viên

Nhóm nền tảng4 thành viên

Nhiều người

avatars hiện một AvatarGroup theo size của Persona: stack (mặc định) hoặc pie. Quá maxAvatars (mặc định 3) thì gom vào nút “+N”; primaryText là tên của nhóm.

Cách dùng

Nên

Dòng phụ ngắn gọn: chức danh, trạng thái, giờ địa phương.
Chọn size theo mật độ: small/medium cho danh sách, huge cho trang hồ sơ.
Luôn có chữ đi kèm trạng thái khi trạng thái quan trọng.

Không nên

Không nhồi quá bốn dòng chữ.
Không dùng presenceOnly khi người dùng cần nhận diện bằng ảnh.
Không tô brand cho tên người.

Props

Prop · Kiểu	Mặc định	Mô tả
namestring	Mặc định: —	Tên — primaryText mặc định và tên của Avatar.
primaryText / secondaryText / tertiaryText / quaternaryTextReactNode	Mặc định: —	Bốn dòng chữ; dòng đầu semibold, các dòng sau caption foreground-2.
size"extra-small" \| "small" \| "medium" \| "large" \| "extra-large" \| "huge"	Mặc định: "medium"	Avatar 20 / 24 / 32 / 40 / 48 / 64px.
presence"available" \| "busy" \| "away" \| "offline"	Mặc định: —	Trạng thái hiện trên Avatar.
presenceOnlyboolean	Mặc định: false	Chỉ hiện chấm trạng thái.
avatar{ src, image, renderImage, color, shape… }	Mặc định: —	Tuỳ chọn truyền cho Avatar.
avatars{ name, src?, color?, image?, renderImage? }[]	Mặc định: —	Nhiều người, hiện bằng AvatarGroup theo size của Persona. Không dùng cùng avatar, presence, presenceOnly.
avatarLayout"stack" \| "pie"	Mặc định: "stack"	Bố cục AvatarGroup của avatars.
maxAvatarsnumber	Mặc định: 3	Số ô tối đa của avatars, tính cả nút “+N”; không áp dụng cho pie.
textPosition"after" \| "before" \| "below"	Mặc định: "after"	Vị trí khối chữ so với Avatar.
textAlignment"start" \| "center"	Mặc định: "start"	Căn khối chữ.