Avatars

아바타는 사용자나 조직을 시각적으로 식별하는 작은 이미지/이니셜입니다. 프로필, 댓글, 멤버 목록 등에서 사용합니다.

Figma 컴포넌트: Avatar, Avatar group, Avatar label group

Sizes

xs(24px), sm(32px), md(40px), lg(48px), xl(56px), 2xl(64px) 여섯 가지 사이즈를 지원합니다.

이미지가 없을 때 이름의 이니셜을 자동으로 표시합니다.

김민이서박지최예정도한수

또는 initials 속성으로 직접 지정할 수 있습니다.

KJLSPJ

이름조차 없는 경우 placeholder 아이콘을 표시합니다.

status 속성으로 우측 하단에 상태 아이콘을 표시할 수 있습니다.

여러 아바타를 겹쳐서 표시합니다. max로 표시할 개수를 제한하면 나머지는 +N으로 카운트됩니다.

아바타 옆에 이름과 보조 텍스트(이메일 등)을 함께 보여줍니다.

김민준kim@iminapp.kr

이서연lee@iminapp.kr

박지호park@iminapp.kr

최예린choi@iminapp.kr

Prop	Type	Default	Description
`src`	string	`-`	이미지 URL
`alt`	string	`-`	이미지 alt 텍스트
`name`	string	`-`	사용자 이름 (이니셜 자동 생성용)
`initials`	string	`-`	직접 지정할 이니셜 텍스트 (name보다 우선)
`size`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	`'md'`	아바타 크기
`status`	'online' \| 'verified' \| 'company'	`-`	우측 하단 상태 아이콘
`placeholder`	boolean	`false`	src/name 없이 placeholder 아이콘 표시

Prop	Type	Default	Description
`avatars`	AvatarItem[]	`[]`	아바타 데이터 배열
`size`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	`'md'`	아바타 크기
`max`	number	`5`	표시할 최대 개수 (초과분은 +N으로 표시)
`showAddButton`	boolean	`false`	우측에 점선 + 버튼 표시
`onAdd`	() => void	`-`	Add 버튼 클릭 핸들러

Prop	Type	Default	Description
`src`	string	`-`	아바타 이미지 URL
`name`	string	`-`	주요 텍스트 (이름)
`email`	string	`-`	보조 텍스트 (이메일 등)
`initials`	string	`-`	직접 지정할 이니셜
`size`	'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	`'md'`	크기
`status`	'online' \| 'verified' \| 'company'	`-`	아바타 상태 아이콘
`placeholder`	boolean	`false`	placeholder 표시

Property	Values
Size	`xs` `sm` `md` `lg` `xl` `2xl`
Placeholder	`True` `False`
Text	`True` `False` (이니셜 표시 여부)
Status icon	`False` `Online indicator` `Company` `Verified`
Breakpoint	`Desktop` `Mobile`