Avatar

이니셜을 우선으로 사람을 표시.

개요

미리보기

예시 언어동작 줄이기

name

size

src

decorative

이렇게 사람을 알아보는 데만 쓴다. 이미지가 없거나 불러오지 못하면 이니셜로 대체한다. 아바타에 상태 점, 점수, 활동 표시를 붙이지 않는다.
이렇게 이니셜을 우선하고, 사진은 사용자가 준 것만 쓴다.
이렇게 하지 않기 기록에 이름이 나온 사람을 기여자로 표시하지 않는다. Avatar 옆에 활동 수·순위를 두지 않는다.
이렇게 하지 않기 이름에서 색을 만들어 사람을 구분하지 않는다. 색만으로 사람을 가르지 않는다.

이름	타입	기본값	설명
`name`	`string`	`김지현`	이름. 접근 이름과 이니셜이 된다. 한글·한자 이름은 첫 글자(성), 라틴 이름은 첫·끝 단어 머리글자. 비우면 알 수 없는 사람 아이콘.
`size?`	`'sm' \| 'md' \| 'lg'`	`md`	32 / 36 / 52px. 대화형이 아니므로 44px 규칙 대상이 아니다.
`src?`	`string`		사진 URL. 불러오지 못하면 이니셜로 바꾼다.
`decorative?`	`boolean`	`false`	옆에 이름 텍스트가 있으면 켠다(aria-hidden). 이름을 두 번 읽지 않게.
그 밖의 속성	—	—	id, aria-describedby 등 네이티브 span 속성은 그대로 전달된다. className·style·children은 받지 않는다.

이렇게 · 이렇게 하지 않기

이렇게 사람을 알아보는 데만 쓴다. 이미지가 없거나 불러오지 못하면 이니셜로 대체한다. 아바타에 상태 점, 점수, 활동 표시를 붙이지 않는다.

이렇게 이니셜을 우선하고, 사진은 사용자가 준 것만 쓴다.

이렇게 하지 않기 기록에 이름이 나온 사람을 기여자로 표시하지 않는다. Avatar 옆에 활동 수·순위를 두지 않는다.

이렇게 하지 않기 이름에서 색을 만들어 사람을 구분하지 않는다. 색만으로 사람을 가르지 않는다.

토큰과 속성

이름	타입	기본값	설명
`name`	`string`	`김지현`	이름. 접근 이름과 이니셜이 된다. 한글·한자 이름은 첫 글자(성), 라틴 이름은 첫·끝 단어 머리글자. 비우면 알 수 없는 사람 아이콘.
`size?`	`'sm' \| 'md' \| 'lg'`	`md`	32 / 36 / 52px. 대화형이 아니므로 44px 규칙 대상이 아니다.
`src?`	`string`		사진 URL. 불러오지 못하면 이니셜로 바꾼다.
`decorative?`	`boolean`	`false`	옆에 이름 텍스트가 있으면 켠다(aria-hidden). 이름을 두 번 읽지 않게.
그 밖의 속성	—	—	id, aria-describedby 등 네이티브 span 속성은 그대로 전달된다. className·style·children은 받지 않는다.