Avatar 头像Avatar · AvatarGroup
代表一个人或一个账号。有图片显示图片,没有或加载失败时回退到名字的首字母。多个人挤在一起时用 AvatarGroup。
基本用法
name 既用来生成首字母,也是读屏读到的名字。中日韩名字取第一个字,拉丁名字取首尾两个词的首字母。什么都不传时显示一个人形图标,并对读屏隐藏。

尺寸
sm 28、md 36(默认)、lg 48,也可以直接给像素值;首字母的字号跟着缩放。
底色
首字母的底色默认是强调色。color="auto" 按名字从六种固定颜色里挑一个(同一个名字永远是同一种颜色);也可以传任意颜色值,或用 children 换掉首字母。
状态点
右下角的小点表示在线状态。状态会并进读屏的名字里(“林小满,在线”),不只靠颜色。
头像组
头像固定叠放(间距 −10),没有悬停动效。max 限制显示的个数,其余折成“+N”;实际人数比传进来的头像多时用 total。size 统一设置里面头像的尺寸。
规格
- 尺寸
- 28 / 36 / 48 · 全圆
- 头像组
- 叠放间距 −10 · 无悬停动效
- 回退
- 图片失败 → 首字母 → 人形图标
接口
Avatar
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | — | 图片地址;加载失败时回退到首字母。 |
name | string | — | 人名:用来生成首字母,也是读屏读到的名字。 |
alt | string | — | 覆盖读屏读到的名字。 |
size | 'sm' | 'md' | 'lg' | number | 'md' | 28 / 36 / 48,或像素值。在 AvatarGroup 里默认跟随组的 size。 |
color | string | 'auto' | — | 首字母底色。默认强调色;auto 按名字从一组固定颜色里挑。 |
status | 'online' | 'busy' | 'away' | 'offline' | — | 右下角的状态点。 |
statusLabel | string | — | 状态的读屏文字,默认 在线 / 忙碌 / 离开 / 离线。 |
children | ReactNode | — | 自定义回退内容,替换首字母。 |
AvatarGroup
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
max | number | — | 最多显示几个头像,其余折成“+N”。 |
total | number | — | 实际总人数(比传进来的头像多时用),用来算“+N”。 |
size | 'sm' | 'md' | 'lg' | number | — | 统一设置里面头像的尺寸。 |
label | string | — | 这组头像的名字,如“项目成员”。 |
无障碍
- 有名字时整个头像是一张图:
role="img",名字是name(或alt)加状态文字;里面的图片和首字母对读屏隐藏,不会重复朗读。 - 没有名字的头像是纯装饰,自动
aria-hidden。旁边已经写了人名时,可以故意不传 name 以免读两遍。 - AvatarGroup 是
role="group",用label起名;“+N”读作“还有 N 人”。 - 头像不可聚焦,没有键盘操作;需要点击时请包进按钮或链接并给出名字。