Avatar

Avatarは、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>

使い方

import { Avatar, AvatarGroup } from "@yamada-ui/react"

import { Avatar, AvatarGroup } from "@/components/ui"

import { Avatar, AvatarGroup } from "@workspaces/ui"

<Avatar />

<AvatarGroup.Root>
  <AvatarGroup.Item />
</AvatarGroup.Root>

バリアントを変更する

<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant, key) => (
      <Avatar variant={variant} name="Hirotomo Yamada" key={key} />
    )}
  </For>
</Wrap>

サイズを変更する

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, key) => <Avatar size={size} name="Hirotomo Yamada" key={key} />}
  </For>
</Wrap>

形を変える

<Wrap gap="md">
  <For each={["circle", "square", "rounded"]}>
    {(size, key) => <Avatar shape={size} name="Hirotomo Yamada" key={key} />}
  </For>
</Wrap>

イニシャルを表示する

nameに文字列を設定すると、イニシャルのアイコンを表示します。

<Avatar name="Hirotomo Yamada" />

画像を表示する

画像を表示する場合は、srcにパスを設定します。

<Avatar src="https://avatars.githubusercontent.com/u/84060430?v=4" />

フォールバック

srcの読み込みが失敗した場合は、2つのフォールバックがあります。

nameがある場合: イニシャルのアイコンを表示します。
nameがない場合: デフォルトのアバターのアイコンを使用します。

<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar name="Hirotomo Yamada" src="https://not-found.com" />
  <Avatar src="https://not-found.com" />
</Wrap>

フォールバックをカスタマイズする

<Wrap gap="md">
  <Avatar bg="warning" src="https://not-found.com" />
  <Avatar icon={<GhostIcon />} src="https://not-found.com" />
</Wrap>

ランダムな色を使う

const randomColorScheme = (name: string) => {
  const index = name.charCodeAt(0) % COLOR_SCHEMES.length
  return COLOR_SCHEMES[index]
}

return (
  <Wrap gap="md">
    <For each={["Hirotomo Yamada", "Koiso Kenji", "Shinohara Natsuki"]}>
      {(name, index) => (
        <Avatar key={index} name={name} colorScheme={randomColorScheme(name)} />
      )}
    </For>
  </Wrap>
)

グループ化する

グループ化する場合は、maxに数値を指定します。指定された数以上のアバターが存在する場合は、切り詰めて残りのアバターを+Xのように表示されます。

<AvatarGroup.Root max={3}>
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <AvatarGroup.Item
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
</AvatarGroup.Root>

Props

Avatar

Prop	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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の移行に伴い、このセクションは更新中です。