Avatar

사람을 사진이나 이니셜로 보여요. 댓글 작성자나 담당자처럼 누구인지 알려야 할 때 써요. 누를 수 없어요.

사용 예시

댓글 작성자

이름 옆에 사진을 두면 누가 쓴 글인지 빨리 알아볼 수 있어요.

김민아시안 잘 봤어요. 두 번째 안이 좋아요.

이준버튼 문구만 고치면 될 것 같아요.

박소라내일 오전까지 반영할게요.

tsx

<div className="flex items-start gap-2">  <Avatar src="/avatar/mina.jpg" name="김민아" />  <div className="flex flex-col">    <span className="text-label">김민아</span>    <span className="text-prose text-fg-muted">시안 잘 봤어요. 두 번째 안이 좋아요.</span>  </div></div>

이니셜

name의 첫 글자가 한글이면 그 1글자를, 영문이면 앞 두 낱말의 첫 글자나 한 낱말의 앞 두 글자를 대문자로 보여요. 숫자와 기호는 건너뛰고, 쓸 글자가 없으면 사람 아이콘을 보여요.

송승협

john doe

john

A송승협

123

tsx

<Avatar name="송승협" /><Avatar name="john doe" /><Avatar name="john" /><Avatar name="A송승협" /><Avatar name="123" />

사진을 불러오지 못할 때

지워진 사진처럼 불러오지 못하면 깨진 이미지 대신 이니셜을 보여요.

tsx

<Avatar src="/avatar/deleted.jpg" name="이준" />

이준

권장

name을 넘기면 사진을 불러오지 못해도 이니셜이 보이고 스크린 리더가 이름을 읽어요.

이준

지양

name이 없으면 사진을 불러오지 못했을 때 사람 아이콘만 보여서 누구인지 알 수 없어요.

크기

목록 옆에는 xs나 sm, 댓글에는 md, 프로필 머리에는 lg나 xl을 써요.

tsx

<Avatar size="xs" name="김민아" /><Avatar size="sm" name="김민아" /><Avatar size="md" name="김민아" /><Avatar size="lg" name="김민아" /><Avatar size="xl" name="김민아" />

색

이니셜만 있는 Avatar가 여럿 모이면 color로 사람을 구분하기 쉬워져요. 같은 사람은 어느 화면에서나 같은 색을 써요.

tsx

<Avatar color="neutral" name="김민아" /><Avatar color="brand" name="이준" /><Avatar color="info" name="박소라" /><Avatar color="success" name="최유진" /><Avatar color="warning" name="정하늘" /><Avatar color="danger" name="한결" />

사람마다 다른 색

seed에 사용자 id처럼 바뀌지 않는 값을 넘기면 그 값으로 색을 계산해요. 같은 사람은 어느 화면과 앱에서나 같은 색이에요. 노랑과 연두는 글자가 잘 보이지 않아서 쓰지 않아요.

tsx

{members.map(member => (  <Avatar key={member.id} seed={member.id} name={member.name} />))}

권장

seed에 사용자 id를 넘기면 이름을 바꿔도 색이 그대로예요.

지양

seed에 이름을 넘기면 이름을 바꿀 때 색도 바뀌어서 다른 사람으로 보여요.

사용자가 고른 색

사용자가 프로필 색을 고르는 앱처럼 토큰에 없는 색은 style로 넘겨요. 배경색과 글자색을 함께 넘겨서 글자가 읽히게 해요.

tsx

<Avatar name="Pantoia Bot" style={{ backgroundColor: user.color, color: '#ffffff' }} />

권장

배경색과 글자색을 함께 넘겨요.

지양

배경색만 넘기면 글자색은 테마를 따라가서 라이트 모드에서는 진한 배경 위에 진한 글자가 보여요.

컨트롤

size

color

seed

src

tsx

<Avatar name="김민아" />

명세

이름
이름	값	기본
src	string	-
사진 주소예요. 없거나 불러오지 못하면 이니셜을 보여요.
name	string	-
스크린 리더가 읽는 이름이고 이니셜을 만드는 글자예요. 첫 글자가 한글이면 1글자, 영문이면 2글자를 보여요. 쓸 글자가 없으면 사람 아이콘을 보여요.
size	xs, sm, md, lg, xl	md
20, 24, 32, 40, 56px이에요.
color	neutral, brand, info, success, warning, danger	neutral
이니셜과 아이콘의 배경색과 글자색이에요. seed와 함께 쓸 수 없어요.
seed	string	-
이 값으로 배경색과 글자색을 계산해요. 같은 값이면 어느 앱에서나 같은 색이에요. color와 함께 쓸 수 없어요.
style	CSSProperties	-
사용자가 고른 색처럼 토큰에 없는 색은 backgroundColor와 color로 함께 넘겨요.
className	string	-