アバターAvatar
Experimental

ユーザーを表す画像で、フォールバック付きです。

状態とバリエーション

プロフィール画像がある場合は AvatarImage を表示し、読み込み失敗時にフォールバックへ戻します。

青

画像がない場合でも、イニシャルやアイコンで誰の情報か判断できるようにします。

田

在席状態を付ける場合は、色だけでなくツールチップでも状態を確認できるようにします。

青

表は横にスクロールできます

プロパティ	型	初期値	説明
Avatar	React.ComponentProps<typeof AvatarPrimitive.Root>	-	画像とフォールバックを包むルート要素です。
AvatarImage.src	string	-	表示する画像の URL です。
AvatarImage.alt	string	-	画像自体が意味を持つ場合の代替テキストです。
Avatar.tooltip	ReactNode	-	ホバー時に表示する名前や補足情報です。
Avatar.tooltipPortalContainer	HTMLElement \| null	-	パターンの擬似ブラウザ内など、ツールチップを描画するコンテナです。
Avatar.presence	"online" \| "away" \| "busy" \| "offline"	-	在席状態を示す小さなステータス点です。
Avatar.presenceLabel	ReactNode	-	在席状態をツールチップや支援技術へ伝えるラベルです。
AvatarFallback.children	ReactNode	-	画像が読み込めない時に表示する文字やアイコンです。