Avatar

이니셜 같은 대체 표시를 갖춘 사람이나 팀의 사진입니다. Avatar.Image를 불러오는 동안 Avatar.Fallback이 보이고, 이미지가 실패하거나 없으면 그대로 남습니다. 이미지는 대체 표시 위에 그려지고, 이미지를 다 불러오면 대체 표시는 사라집니다.

<Avatar.Root label="Ada Lovelace">
  <Avatar.Image src={user.photoUrl} />
  <Avatar.Fallback>AL</Avatar.Fallback>
</Avatar.Root>

ALGHAT

이름

label이 있으면 이미지와 대체 표시 중 무엇이 보이든 Avatar는 label로 이름 붙은 이미지 하나입니다. 그래서 스크린 리더는 "AL"이 아니라 "Ada Lovelace"라고 읽습니다. 같은 이유로 Avatar.Image는 alt를 받지 않습니다.

이름이 Avatar 옆에 적혀 있으면 label을 빼세요. 그러면 Avatar는 장식이 되어 보조 기술에서 숨겨지므로 이름을 두 번 읽지 않습니다.

AL

Ada Lovelace

<Avatar.Root>
  <Avatar.Image src={user.photoUrl} />
  <Avatar.Fallback>AL</Avatar.Fallback>
</Avatar.Root>
<Text>Ada Lovelace</Text>

크기

size는 avatar.size 토큰의 sm, md(기본값), lg입니다. 대체 표시의 텍스트는 avatar.font.scale로 크기에 맞춰 커집니다.

이니셜은 직접 정하세요. 이름을 줄이는 방법은 언어와 사람마다 다릅니다. 모양과 색은 avatar.radius, avatar.bg, avatar.fg로 바꾸세요.

언제 쓰나요

쓸 때: 목록이나 머리글, 메시지 옆에 보이는 사람, 팀, 워크스페이스.

쓰지 않을 때: 그 자체로 내용이 있는 사진 → 실제 alt 텍스트가 있는 <img>. 상태나 개수 → Badge. 프로필 메뉴를 여는 컨트롤 → 이름을 지닌 Menu 트리거 안에 Avatar를 넣으세요.

Props