크기 변형 (Size Variants)
6가지 크기의 아바타를 제공합니다: xs(24px), sm(32px), md(40px), lg(48px), xl(64px), 2xl(96px)
JD
JD
JD
JD
JD
JD
형태 변형 (Shape Variants)
원형(Circle)과 둥근 사각형(Rounded Square) 두 가지 형태를 지원합니다.
JD
JD
콘텐츠 우선순위 (Content Priority)
1. 이미지 → 2. 이니셜 → 3. 기본 아이콘 순서로 표시됩니다.
이미지
이니셜
AB
기본 아이콘
상태 표시 (Status Indicator)
온라인(green), 오프라인(gray), 자리비움(amber), 다른용무중(red) 상태를 표시합니다.
온라인
오프라인
자리비움
다른용무중
아바타 그룹 (Avatar Group)
여러 아바타를 겹쳐서 표시하며, 호버시 약간 들어올려집니다. 최대 표시 개수를 초과하면 "+N" 표시됩니다.
+5
뱃지와 함께 (With Badge)
알림 점 또는 숫자 뱃지를 표시할 수 있습니다.
알림 점
숫자 뱃지
3
10+ 뱃지
12
로딩 상태 (Loading State)
스켈레톤 펄스 애니메이션으로 로딩 상태를 표시합니다.
툴팁과 함께 (With Tooltip)
아바타에 마우스를 올리면 이름이 표시됩니다.
John Doe
AB
Alice Brown
CD
Charlie Davis
복합 예제 (Combined Example)
다양한 기능을 조합한 실제 사용 예제입니다.
온라인 상태 + 알림
5
다른용무중 + 이니셜
SK
그룹 + 상태
