---
version: 1.0.0-beta.6
---
# Avatar
URL: /docs/components/avatar
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/avatar.mdx

Avatar는 프로필 이미지 또는 대체 텍스트를 표시합니다.

***

title: 'Avatar'
site\_name: 'Avatar - Vapor Core'
description: 'Avatar는 프로필 이미지 또는 대체 텍스트를 표시합니다.'
------------------------------------------------

<Demo name="avatar/default-avatar">
  ```json doc-gen:file
  {
      "file": "./src/components/demo/examples/avatar/default-avatar.tsx",
      "codeblock": true
  }
  ```
</Demo>

## Property

***

### Size

크기를 지정합니다.

<Demo name="avatar/avatar-size">
  ```json doc-gen:file
  {
      "file": "./src/components/demo/examples/avatar/avatar-size.tsx",
      "codeblock": true
  }
  ```
</Demo>

### Shape

모양을 지정합니다.

<Demo name="avatar/avatar-shape">
  ```json doc-gen:file
  {
      "file": "./src/components/demo/examples/avatar/avatar-shape.tsx",
      "codeblock": true
  }
  ```
</Demo>

## Examples

***

### Composition Pattern

하위 컴포넌트를 조합하여 이미지와 대체 콘텐츠를 커스터마이징합니다.

<Demo name="avatar/flexible">
  ```json doc-gen:file
  {
      "file": "./src/components/demo/examples/avatar/flexible.tsx",
      "codeblock": true
  }
  ```
</Demo>

### Fallback Only

이미지 없이 대체 콘텐츠만 표시합니다. `delay` prop으로 대체 콘텐츠의 표시 지연 시간을 설정합니다.

<Demo name="avatar/avatar-fallback-only">
  ```json doc-gen:file
  {
      "file": "./src/components/demo/examples/avatar/avatar-fallback-only.tsx",
      "codeblock": true
  }
  ```
</Demo>

## Props Table

***

### Avatar.Root

> ⚠️ Spec file not found: `avatar-root.json`

#### Avatar.ImagePrimitive

> ⚠️ Spec file not found: `avatar-image-primitive.json`

#### Avatar.FallbackPrimitive

> ⚠️ Spec file not found: `avatar-fallback-primitive.json`