03 · Components · 표현
아바타Avatar
사용자·조직·아이템을 식별하는 작은 이미지. 이미지가 없을 때 이니셜로 대체됩니다. 스택 형태로 모아서 "여러 명 참여"를 표현할 수도 있습니다.
StableWCAG AA
크기
tsx
<div className="flex items-center gap-4">
<Avatar initials="서" size="sm" alt="서연" />
<Avatar initials="민" size="md" alt="민수" />
<Avatar initials="윤" size="lg" alt="윤지" />
<Avatar initials="태" size="xl" alt="태현" />
</div>미리보기
스택
tsx
<AvatarStack>
<Avatar initials="서" alt="서연" />
<Avatar initials="민" alt="민수" />
<Avatar initials="윤" alt="윤지" />
<Avatar initials="+3" alt="외 3명" />
</AvatarStack>미리보기
아바타가 이름을 시각적으로 보여주는 맥락이라면 alt=""로 비워 스크린리더에서 건너뛰게 하세요. 이름이 함께 보이지 않는 경우(예: 프로필 헤더)엔 alt="홍길동의 프로필 사진"처럼 명시합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | 이미지 URL. 없으면 initials 표시. | |
initials | string | 이미지 대체 텍스트 (1~2글자 권장). | |
alt | string | 스크린리더용. 시각 맥락이 있으면 빈 문자열로. | |
size | "sm" | "md" | "lg" | "xl" | "md" | 지름 28 / 36 / 48 / 64px. |