---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/display/Avatar
title: Avatar
---
```ts
import { Avatar } from "zmp-ui";
```


Dùng để hiển thị ảnh đại diện của người dùng, hỗ trợ dạng hình tròn và fallback khi không có ảnh.

## Ví dụ



## Bảng thuộc tính


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| online | boolean | No | false | Hiển thị trạng thái online của Avatar |
| story | StoryStatus | No |  | Nhận các giá trị: `default`, `seen` |
| size | number | No |  | Kích thước avatar |
| src | string | No |  | `src` cho thẻ `img` của avatar |
| backgroundColor | 'BLUE-BLUELIGHT' \| 'PURPLE-BLUE' \| 'SKYBLUE-GREEN' \| 'GREEN-GREENLIGHT' | No |  | Màu nền của avatar. Các giá trị hợp lệ bao gồm: - `BLUE-BLUELIGHT`: Màu xanh dương đậm - `PURPLE-BLUE`: Màu tím-xanh dương - `SKYBLUE-GREEN`: Màu xanh da trời nhạt-xanh lá cây - `GREEN-GREENLIGHT`: Màu xanh lá cây đậm-xanh lá cây nhạt Nếu không được chỉ định trước và Avatar là string thì giá trị sẽ được tính toán trước dựa trên nội dung Avatar. |
| blocked | boolean | No | false | Trạng thái block của avatar. Nếu có giá trị là true, avatar sẽ hiển thị trạng thái bị khóa. |
| onClick | React.MouseEventHandler | No |  | Callback được gọi khi người dùng nhấn chuột vào avatar. |
| children | React.ReactNode | No |  |  |