---
title: Avatar
description: "`Avatar`は、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。"
links:
- style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/avatar/avatar.style.ts
- source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/avatar
- storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-avatar--basic
---
```tsx
```
## 使い方
```tsx
import { Avatar, AvatarGroup } from "@yamada-ui/react"
```
```tsx
import { Avatar, AvatarGroup } from "@/components/ui"
```
```tsx
import { Avatar, AvatarGroup } from "@workspaces/ui"
```
```tsx
```
```tsx
```
### バリアントを変更する
```tsx
{(variant, key) => (
)}
```
### サイズを変更する
```tsx
{(size, key) => }
```
### 形を変える
```tsx
{(size, key) => }
```
### イニシャルを表示する
`name`に文字列を設定すると、イニシャルのアイコンを表示します。
```tsx
```
### 画像を表示する
画像を表示する場合は、`src`にパスを設定します。
```tsx
```
### フォールバック
`src`の読み込みが失敗した場合は、2つのフォールバックがあります。
- `name`がある場合: イニシャルのアイコンを表示します。
- `name`がない場合: デフォルトのアバターのアイコンを使用します。
```tsx
```
### フォールバックをカスタマイズする
```tsx
} src="https://not-found.com" />
```
### ランダムな色を使う
```tsx
const randomColorScheme = (name: string) => {
const index = name.charCodeAt(0) % COLOR_SCHEMES.length
return COLOR_SCHEMES[index]
}
return (
{(name, index) => (
)}
)
```
### グループ化する
グループ化する場合は、`max`に数値を指定します。指定された数以上のアバターが存在する場合は、切り詰めて残りのアバターを`+X`のように表示されます。
```tsx
```
## Props
### Avatar
| Prop | Default | Type | Description |
| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `alt` | - | `HTMLProps<"img">["alt"]` | The `HTMLImageElement` property `alt`. |
| `crossOrigin` | - | `HTMLProps<"img">["crossOrigin"]` | The `HTMLImageElement` property `crossOrigin`. |
| `fallback` | - | `ReactNode` | The fallback text to display if the image is not provided. |
| `fallbackProps` | - | `AvatarFallbackProps` | The props to pass to the fallback component. |
| `format` | - | `(name: string) => string` | Function to get the initials to display. |
| `icon` | - | `ReactElement` | The avatar icon to use. |
| `imageProps` | - | `AvatarImageProps` | The props to pass to the image component. |
| `loading` | - | `HTMLProps<"img">["loading"]` | Defines loading strategy. |
| `name` | - | `string` | The name of the person in the avatar. - If `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials |
| `referrerPolicy` | `"no-referrer"` | `HTMLProps<"img">["referrerPolicy"]` | Defining which referrer is sent when fetching the resource. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `src` | - | `HTMLProps<"img">["src"]` | The image url of the avatar. |
| `srcSet` | - | `HTMLProps<"img">["srcSet"]` | List of sources to use for different screen resolutions. |
### AvatarGroup.Root
| Prop | Default | Type | Description |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `max` | - | `number` | The maximum number of visible avatars. |
| `reverse` | - | `boolean` | Whether to reverse the order of the avatars. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
### AvatarGroup.Item
| Prop | Default | Type | Description |
| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | - | `As` | The HTML element to render. |
| `asChild` | - | `boolean` | Merges its props onto its immediate child. |
| `css` | - | `CSSObject \| CSSObject[]` | The CSS object. |
| `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. |
| `size` | `"md"` | `"lg" \| "md" \| "sm" \| "xl" \| "xs"` | The size of the component. |
| `variant` | `"solid"` | `"outline" \| "solid" \| "subtle" \| "surface"` | The variant of the component. |
| `alt` | - | `HTMLProps<"img">["alt"]` | The `HTMLImageElement` property `alt`. |
| `crossOrigin` | - | `HTMLProps<"img">["crossOrigin"]` | The `HTMLImageElement` property `crossOrigin`. |
| `fallback` | - | `ReactNode` | The fallback text to display if the image is not provided. |
| `fallbackProps` | - | `AvatarFallbackProps` | The props to pass to the fallback component. |
| `format` | - | `(name: string) => string` | Function to get the initials to display. |
| `icon` | - | `ReactElement` | The avatar icon to use. |
| `imageProps` | - | `AvatarImageProps` | The props to pass to the image component. |
| `loading` | - | `HTMLProps<"img">["loading"]` | Defines loading strategy. |
| `name` | - | `string` | The name of the person in the avatar. - If `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials |
| `referrerPolicy` | `"no-referrer"` | `HTMLProps<"img">["referrerPolicy"]` | Defining which referrer is sent when fetching the resource. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `src` | - | `HTMLProps<"img">["src"]` | The image url of the avatar. |
| `srcSet` | - | `HTMLProps<"img">["srcSet"]` | List of sources to use for different screen resolutions. |
## アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。