아바타
사용자·회사를 식별하는 단일 원형 표시다. 목록·헤더·댓글에서 사람이나 조직을 빠르게 구분하게 한다. 여러 명을 겹쳐 보여줄 때는 AvatarGroup 을 쓴다.
상태
김sm
김md
김lg
활용 방법
이니셜 폴백
src 가 없으면 name 첫 글자를 보여준다.
Preview
김
tsx
<Avatar name="김민준" />
이미지
이미지 로드 실패 시 자동으로 이니셜로 돌아간다.
Preview
tsx
<Avatar name="Alice" src="https://i.pravatar.cc/150?u=alice" />
사용 지침
- · 개인·회사 식별이 필요한 행과 헤더에 쓴다.
- · 여러 명 참여자는 AvatarGroup 을 쓴다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| name | string | - | 대체 텍스트와 이니셜 출처 |
| src | string | - | 이미지 URL |
| size | "sm" | "md" | "lg" | "md" | 크기 |