# Avatar
URL: /docs/components/avatar

Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.

## Import

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

## Preview

<Demo name="default-avatar">
  ```tsx
  import { Avatar } from '@vapor-ui/core';

  export default function DefaultAvatar() {
      return (
          <Avatar.Root
              size="md"
              alt="goorm"
              src="https://statics.goorm.io/gds/resources/brand-images/light/favi_goorm.svg"
          >
              <Avatar.Image />
              <Avatar.Fallback>goorm</Avatar.Fallback>
          </Avatar.Root>
      );
  }
  ```
</Demo>

## Props

### Avatar.Root

| prop      | type                   | default  | description                                                |
| --------- | ---------------------- | -------- | ---------------------------------------------------------- |
| `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

| prop        | type                  | default | description                    |
| ----------- | --------------------- | ------- | ------------------------------ |
| `className` | `string \| undefined` |         | 이미지 요소에 적용할 추가 CSS 클래스를 지정합니다. |

### Avatar.Fallback

| prop        | type                               | default | description                   |
| ----------- | ---------------------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined`              |         | 폴백 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `style`     | `React.CSSProperties \| undefined` |         | 폴백 요소에 대한 인라인 스타일을 지정합니다.     |

### Avatar.Simple

| prop      | type                   | default  | description                                                |
| --------- | ---------------------- | -------- | ---------------------------------------------------------- |
| `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                                                                  |
| ------- | ---------------------------------------------------------------------------- |
| **alt** | 아바타 이미지의 대체 텍스트를 지정합니다.<br />이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다. |

**alt Example:**

```tsx
<Avatar.Simple size="sm" src={IMAGE_URL} {...args} alt="hi" />
```
