Avatar

用于在个人资料、成员列表或共享工作区中识别人员与团队。

预览

尺寸与团队分组

比较三种尺寸的首字母头像与状态标记，再展示团队分组和其他成员数量。

SMAMUI

团队

ANDESO

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/avatar

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

将 AvatarImage 与 AvatarFallback 配对，确保图片不可用时仍可识别。用 AvatarBadge 表示状态，用 AvatarGroup 和 AvatarGroupCount 组合多人信息。

import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export default function Example() {
  return (
    <Avatar>
      <AvatarFallback role="img" aria-label="Alex Kim">AK</AvatarFallback>
    </Avatar>
  );
}

API 参考

基于 Base UI Avatar 处理图片加载和 fallback 切换。提供三种尺寸、状态 Badge、重叠的头像组以及剩余人数计数。

组件	属性	类型	默认值	说明
`Avatar`	`size`	`"sm" \| "default" \| "lg"`	`"default"`	同时调整 Avatar 与 Badge 的尺寸。
`AvatarImage`	`src`	`string`	`—`	要显示的图片 URL。
`AvatarImage`	`alt`必填	`string`	`—`	说明图片中人物或对象的替代文本。
`AvatarFallback`	`delay`	`number`	`0`	显示 fallback 前的等待时间。
`AvatarBadge`	`children`	`React.ReactNode`	`—`	显示状态点或小型状态图标。

预览

尺寸与团队分组

安装

用法

API 参考

无障碍