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.
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, color, shape } | Mặc định: — | Tuỳ chọn truyền cho Avatar. |
| 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ữ. |