Avatar

사용자·엔티티를 나타내는 프로필 이미지, 이니셜, 아이콘 표시 컴포넌트입니다.

기본

이미지, 이니셜 텍스트, 아이콘 세 가지 형태를 지원합니다.

name으로 기본 아이콘을 사용하고, src 이미지 또는 as와 기본 슬롯을 조합해 커스텀 아바타를 구성합니다.

avatar_sm · avatar_lg · avatar_xl로 스케일을 조절합니다.

기본은 원형이며, square prop으로 avatar_square(둥근 모서리)를 적용합니다.

이니셜·아이콘 아바타에 공통 color_* 클래스를 조합합니다.

badge-color · badge-label prop으로 온라인·오프라인 등 상태를 표시합니다. 부모에 position: relative가 적용됩니다.

AvatarGroup으로 여러 아바타를 겹쳐 표시합니다.

Prop	타입	기본값	설명
`as`	string \| Component	span	루트 요소 또는 커스텀 컴포넌트
`name`	string	—	common-icons 키. avatar_icon으로 렌더합니다
`src`	string \| { src: string }	—	이미지 URL 또는 정적 이미지 객체 (avatar_image)
`alt`	string	—	이미지 대체 텍스트
`initials`	string	—	이니셜 텍스트 (이미지·아이콘 없을 때)
`color`	string	—	이니셜·아이콘 배경 color_*
`size`	'sm' \| 'md' \| 'lg' \| 'xl'	md	avatar_sm · avatar_lg · avatar_xl
`square`	boolean	false	사각형 모서리 (avatar_square)
`badge-color`	string	—	상태 점 색상 (avatar_badge)
`badge-label`	string	—	상태 점 aria-label
`aria-hidden`	boolean	false	그룹 내 장식용 아바타
`aria-label`	string	—	아이콘·커스텀 아바타의 접근성 라벨

Prop	타입	기본값	설명
`aria-label`	string	—	그룹 접근성 라벨 (권장)

슬롯	설명
`default`	이미지·아이콘·컴포넌트 등 커스텀 콘텐츠
`icon`	아이콘 슬롯 (avatar_icon)

슬롯	설명
`default`	Avatar 자식 목록

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

토큰	기본값	설명
`--avatar-size-sm · --avatar-size · --avatar-size-lg · --avatar-size-xl`	1.5rem · 2rem · 2.5rem · 3.5rem	아바타 지름
`--avatar-group-overlap`	-0.5rem	그룹 겹침 오프셋
`--avatar-badge-size · --avatar-badge-size-sm · --avatar-badge-size-lg`	8px · 6px · 10px	상태 점 크기