Avatar

Mobile

순수 시각 primitive — 플랫폼 분기 없음. Web 명세 그대로 mobile에 적용.

Preview

Variants

image — 프로필 이미지 로드 성공
initials — 이름 첫 글자 (로드 실패 / 이미지 없음)
icon — 익명/시스템 (User 아이콘)

States

default · loading · online · offline · error

Sizes

지원 사이즈: sm · md · lg · xl

Default: md (40×40)

Foundation Sizes 매핑 따름. Tiro에서 TopBar/리스트 md, profile page xl 사용.

Size	Dimensions	Primary use
sm	32 × 32	Dense 리스트 인라인, 리스트 행 leading
md	40 × 40	Default. 리스트 행, 헤더
lg	48 × 48	카드 프로필, 큰 리스트
xl	56 × 56	Profile page, Avatar detail

Token Mapping

Token	Value	Description
radius	`rounded-full`	원형
border	`border border-border`	기본
initials bg	`bg-{lime/blue/rose/amber/purple/cyan/pink/yellow}-100`	화자 colorIndex 8 순환 (SpeakerChip 동일)
initials text	`text-{…}-700`	Bold
status dot size	25% of avatar size	우하단
online dot	`bg-lime-500`
offline dot	`bg-muted-foreground`

Props

type AvatarProps = {
  src?: string
  name?: string           // alt + initials 추출
  size?: 20 | 24 | 32 | 40 | 48
  status?: 'online' | 'offline'
  colorIndex?: number     // speaker color 고정용
}

Usage

<Avatar src={user.imageUrl} name={user.name} size={40} />

<Avatar name="Plato Kim" size={32} />  // initials fallback

사용자 식별 맥락: alt={name} 필수
Decorative: aria-hidden

Do / Don't

Do: 사용자 식별 맥락에서만 사용
Do: 이미지 로드 실패 시 initials fallback
Don't: name 없이 initials 생성 금지

Avatar

On this page