Avatar

Import

import { Avatar } from '@vapor-ui/core';

Preview

<Avatar.Root label="Goorm" size="md" square={false}>
  <Avatar.Image src="https://statics.goorm.io/gds/resources/brand-images/light/favi_goorm.svg" />
</Avatar.Root>

Props

Avatar.Root

이름	타입	기본값	설명
`src`	`string` \| `undefined`	`-`	아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다.
`alt`	`string`	`-`	아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다.
`delayMs`	`number` \| `undefined`	`0`	이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다.
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`	`'md'`	아바타의 전체 크기를 제어합니다.
`shape`	`'square'` \| `'circle'`	`'square'`	아바타의 모서리 둥글기를 설정합니다. 'square'는 둥근 사각형, 'circle'은 완전한 원형입니다.

Avatar.Image

이름	타입	기본값	설명
`loading`	`'eager'` \| `'lazy'` \| `undefined`	`-`	브라우저가 이미지를 즉시(eager) 로드할지, 뷰포트에 가까워질 때까지(lazy) 로딩을 지연할지 지정합니다.
`referrerPolicy`	`string` \| `undefined`	`-`	이미지를 가져올 때 전송할 referrer 정보를 지정합니다.
`decoding`	`'async'` \| `'sync'` \| `'auto'` \| `undefined`	`'auto'`	브라우저가 이미지를 어떻게 디코딩할지에 대한 힌트를 제공합니다.
`className`	`string` \| `undefined`	`-`	이미지 요소에 적용할 추가 CSS 클래스를 지정합니다.

Avatar.Fallback

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	폴백 요소에 적용할 추가 CSS 클래스를 지정합니다.
`style`	`React.CSSProperties` \| `undefined`	`-`	폴백 요소에 대한 인라인 스타일을 지정합니다.

Avatar.Simple

이름	타입	기본값	설명
`src`	`string` \| `undefined`	`-`	아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다.
`alt`	`string`	`-`	아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다.
`delayMs`	`number` \| `undefined`	`0`	이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다.
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`	`'md'`	아바타의 전체 크기를 제어합니다.
`shape`	`'square'` \| `'circle'`	`'square'`	아바타의 모서리 둥글기를 설정합니다. 'square'는 둥근 사각형, 'circle'은 완전한 원형입니다.

Accessibility Table

Avatar WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Avatar는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

개발 시 준수해야 할 내용을 명시합니다.

Props

Description

label

아바타 이미지의 대체 텍스트를 지정합니다.

이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다.

<Avatar label="gds-logo"> 		
    <Avatar.Image src="https://gds-logo.webp" /></Avatar>

컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.

Accessibility	설명
label	아바타 이미지의 대체 텍스트를 지정합니다. 이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다.

On this page