Avatar

インポート

import { Avatar, AvatarImage, AvatarFallback } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Avatar, AvatarImage, AvatarFallback } from '@caroainc/ui-components/avatar'

基本的な使い方

alt には「avatar」「icon」のような汎用的な文言ではなく、誰の画像か分かる具体的な名前を指定します（画像が読み込めない環境やスクリーンリーダー利用時に意味を持つのはこの文言だけです）。

田

<Avatar>
  <AvatarImage src={user.avatarUrl} alt={`${user.name}のプロフィール画像`} />
  <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
</Avatar>

フォールバック

画像が読み込めない場合に表示されます。

YTABCD

<Avatar>
  <AvatarFallback>YT</AvatarFallback>
</Avatar>

サイズ変更

size propで4段階のサイズを指定できます（デフォルトは default）。

SMMDLGXL

<Avatar size="sm">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar size="default">
  <AvatarFallback>MD</AvatarFallback>
</Avatar>
<Avatar size="lg">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>
<Avatar size="xl">
  <AvatarFallback>XL</AvatarFallback>
</Avatar>

className で任意のサイズに上書きすることも引き続き可能です（例: <Avatar className="h-20 w-20">）。

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	アバターのサイズ（sm: 32px, default: 40px, lg: 48px, xl: 64px）
`className`	`string`	`-`	追加のCSSクラス（sizeを上書きする場合等）