头像 / Avatar

使用头像展示身份、团队与用户列表。

成员列表

紧凑列表展示姓名与状态。

艾薇

成员 1

状态：在线

凯林

成员 2

状态：在线

朱尔

成员 3

状态：在线

示例代码

<Avatar className="size-12">
  <AvatarImage src="/avatars/124599.jpg" alt="成员" />
  <AvatarFallback>艾薇</AvatarFallback>
</Avatar>

尺寸与占位

调整头像大小与缩写占位。

艾薇凯林朱尔未知

示例代码

<Avatar className="size-16">
  <AvatarFallback>未知</AvatarFallback>
</Avatar>

状态与群组

展示在线状态与重叠头像。

艾薇

凯林

艾薇凯林朱尔+2

示例代码

<div className="relative">
  <Avatar className="size-12">...</Avatar>
  <span className="absolute bottom-0 right-0 size-2.5 rounded-full bg-primary ring-2 ring-background" />
</div>

形状头像

方形、圆角方形以及图形遮罩样式。

艾薇

方形

凯林

圆角方形

心形

自定义遮罩

艾薇

星形

自定义遮罩

凯林

示例代码

<Avatar className="size-16 rounded-none">
  <AvatarImage src="/avatars/124599.jpg" alt="成员" />
  <AvatarFallback className="rounded-none">艾薇</AvatarFallback>
</Avatar>

<Avatar
  className="size-16 rounded-none"
  style={{
    clipPath:
      "polygon(50% 4%, 61% 35%, 95% 35%, 67% 54%, 78% 88%, 50% 68%, 22% 88%, 33% 54%, 5% 35%, 39% 35%)",
  }}
>
  <AvatarImage src="/avatars/6880091.png" alt="成员" />
  <AvatarFallback className="rounded-none">凯林</AvatarFallback>
</Avatar>

Loading dashboard...