AvatarGroup

Avatar 여러 개를 겹쳐 보이고, 넘치는 사람 수는 「+N」으로 보여요. 담당자, 참여자, 읽은 사람처럼 사람 목록을 좁은 곳에 보일 때 써요. 한 사람만 보일 때는 Avatar를 써요.

사용 예시

담당자

목록의 한 줄처럼 좁은 곳에서는 max를 작게 두고 size를 sm으로 줄여요.

결제 화면 시안

알림 문구 정리

출시 점검

tsx

<AvatarGroup max={3} size="sm" aria-label={`담당자 ${task.people.length}명`}>  {task.people.map(person => (    <Avatar key={person.id} seed={person.id} name={person.name} />  ))}</AvatarGroup>

넘치는 사람 수

max보다 사람이 많으면 앞에서부터 max명만 보여요.

tsx

<AvatarGroup max={3} aria-label="참여자 7명">  {members.map(member => (    <Avatar key={member.id} seed={member.id} name={member.name} />  ))}</AvatarGroup>

권장

aria-label에 전체 사람 수를 적으면 스크린 리더가 몇 명인지 먼저 읽어요.

지양

max가 없으면 사람이 늘수록 길어지고, 이름이 없으면 무엇의 목록인지 알 수 없어요.

크기

목록 옆에는 xs나 sm, 카드 헤더에는 md를 써요.

tsx

<AvatarGroup max={3} size="xs" aria-label="참여자 7명">…</AvatarGroup><AvatarGroup max={3} size="sm" aria-label="참여자 7명">…</AvatarGroup><AvatarGroup max={3} size="md" aria-label="참여자 7명">…</AvatarGroup><AvatarGroup max={3} size="lg" aria-label="참여자 7명">…</AvatarGroup><AvatarGroup max={3} size="xl" aria-label="참여자 7명">…</AvatarGroup>

배경에 따라

배경이 bg가 아니면 --avatar-group-ring을 그 배경색으로 바꿔요. 링이 배경과 같아야 Avatar 사이가 비어 보여요.

well

panel

tsx

<div className="bg-bg-well rounded-r8 p-3">  <AvatarGroup max={3} aria-label="참여자 7명" style={{ '--avatar-group-ring': 'var(--color-bg-well)' } as CSSProperties}>    …  </AvatarGroup></div>

넘치는 사람 수 문구

읽은 사람처럼 수가 중요한 곳에서는 renderOverflow로 「+N」 대신 다른 문구를 보여요.

5명

tsx

<AvatarGroup max={2} size="sm" aria-label="읽은 사람 7명" renderOverflow={count => `${count}명`}>  {members.map(member => (    <Avatar key={member.id} seed={member.id} name={member.name} />  ))}</AvatarGroup>

컨트롤

max

size

tsx

<AvatarGroup max={3} aria-label="참여자 7명">  {members.map(member => (    <Avatar key={member.id} seed={member.id} name={member.name} />  ))}</AvatarGroup>

명세

이름
이름	값	기본
max	number	-
보이는 Avatar 수예요. 사람이 더 많으면 나머지는 「+N」 하나로 보이고 스크린 리더는 「외 N명」으로 읽어요.
size	xs, sm, md, lg, xl	md
안의 Avatar와 「+N」에 똑같이 적용돼요. 겹치는 폭은 4, 4, 6, 8, 12px이에요.
renderOverflow	(count: number) => ReactNode	-
「+N」 자리에 보일 내용을 돌려줘요.
aria-label	string	-
스크린 리더가 읽는 그룹 이름이에요.
--avatar-group-ring	CSS 변수	var(--color-bg)
Avatar 사이 2px 링의 색이에요.
className	string	-