CoreAvatar

사용자 프로필 이미지, 텍스트, 기본 아이콘을 표시하는 아바타 컴포넌트. Avatar로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Avatar를 사용하세요.

CoreAvatar는 이미지, 텍스트 이니셜, 기본 아이콘 중 하나를 표시하는 아바타 컴포넌트입니다.

2가지 shape — circle (기본), square
5가지 size — xs, sm, md (기본), lg, xl
14가지 colorType — 텍스트 기반 색상 자동 결정 또는 명시적 지정
이미지 지연 로딩 — isLazy prop으로 lazy loading 제어
뱃지 합성 — dot, statusBadge, iconBadge prop으로 오버레이 뱃지 배치

Usage

텍스트 아바타

<HStack $css={{ gap: '8px' }}>
<CoreAvatar text="F" />
<CoreAvatar text="F" colorType="red" />
<CoreAvatar text="Featuring" colorType="blue" />
<CoreAvatar shape="square" text="F" colorType="green" />
</HStack>

이미지 아바타

<HStack $css={{ gap: '8px' }}>
<CoreAvatar src="https://i.pravatar.cc/150?img=1" isLazy />
<CoreAvatar src="https://i.pravatar.cc/150?img=2" shape="square" isLazy />
</HStack>

기본 아이콘

<HStack $css={{ gap: '8px' }}>
<CoreAvatar showDefaultIcon />
<CoreAvatar shape="square" showDefaultIcon />
</HStack>

크기

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreAvatar text="F" size="xs" colorType="blue" />
<CoreAvatar text="F" size="sm" colorType="blue" />
<CoreAvatar text="F" size="md" colorType="blue" />
<CoreAvatar text="F" size="lg" colorType="blue" />
<CoreAvatar text="F" size="xl" colorType="blue" />
</HStack>

Dot 뱃지

<HStack $css={{ gap: '8px' }}>
<CoreAvatar text="F" colorType="blue" dot={{ color: 'red', type: 'filled' }} />
<CoreAvatar text="F" colorType="blue" dot={{ color: 'red', type: 'border', size: 'sm' }} />
<CoreAvatar src="https://i.pravatar.cc/150?img=3" dot={{ color: 'green' }} isLazy />
</HStack>

Status Badge

<HStack $css={{ gap: '8px' }}>
<CoreAvatar text="F" colorType="blue" statusBadge={{ status: 'primary', type: 'filled', text: '99+' }} />
<CoreAvatar src="https://i.pravatar.cc/150?img=4" statusBadge={{ status: 'success', type: 'filled', text: '3' }} isLazy />
</HStack>

Border와 함께

<HStack $css={{ gap: '8px' }}>
<CoreAvatar text="F" colorType="green" border />
<CoreAvatar text="F" colorType="green" border dot={{ color: 'red' }} />
<CoreAvatar src="https://i.pravatar.cc/150?img=5" border isLazy />
</HStack>

Props

Prop

Type

avatarShape

Prop

Type

avatarSize

Prop

Type

CoreAvatarColor

Prop

Type

CoreDotProps

CoreDot를 참조하세요.

CoreStatusBadgeProps

CoreStatusBadge를 참조하세요.

CoreIconBadgeProps

CoreIconBadge를 참조하세요.

스타일

Size Variants

Size	Width/Height	Border Radius (Square)
`xs`	`16px`	`radius-100`
`sm`	`24px`	`radius-100`
`md`	`32px`	`radius-100`
`lg`	`40px`	`radius-100`
`xl`	`84px`	`radius-200`

Shape Variants

circle — border-radius: radius-full
square — border-radius: radius-100 (xs~lg), radius-200 (xl)

Color Type (Circle)

colorType	color	backgroundColor
`gray`	`gray-70`	`gray-20`
`red`	`red-60`	`red-20`
`blue`	`blue-60`	`blue-20`
나머지	`{colorType}-60~70`	`{colorType}-20`

Color Type (Square)

color: white (모든 colorType 동일)
backgroundColor: {colorType}-40

마이그레이션 가이드

CoreAvatar에서 Avatar로 이전하세요.

// Before
<CoreAvatar text="F" colorType="blue" size="md" shape="circle" border />

// After
<Avatar.Root size="md" shape="circle" border>
  <Avatar.Fallback colorType="blue">F</Avatar.Fallback>
</Avatar.Root>

CoreAvatar prop	Avatar 대응
`text`	`<Avatar.Fallback>` 자식
`src`	`<Avatar.Image src={...} />`
`showDefaultIcon`	`<Avatar.Fallback />`
`dot`	`<Avatar.Indicator />` 서브컴포넌트
`statusBadge`	`<Avatar.Indicator />` 서브컴포넌트
`iconBadge`	`<Avatar.Indicator />` 서브컴포넌트

On this page