Avatar

ユーザーやオブジェクトを視覚的に表現するコンポーネント。プロフィール画像、イニシャル、またはフォールバックアイコンを表示します。

Basic

jui-avatar の最も基本的な使用例です。

size プロパティを使用してコンポーネントの大きさを変更します。

shape プロパティを使用してアバターの形状を変更します。

画像が未設定または読み込みエラーの場合、name プロパティからイニシャルを自動生成して表示します。

color プロパティを使用してアバターのイニシャル背景色を変更します。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`color-mix()`	カラーバリアント	111+	113+	16.4+	Baseline 2023

💡 color-mix() はイニシャル表示時の背景色生成に使用しています。2023年以降の主要ブラウザすべてで対応済みです。

機能	Baseline 達成	Widely Available 予定
`color-mix()`	2023年	2025年後半 ✅

WAI-ARIA:
- ルート要素には role="img" が付与され、画像として支援技術に認識されます。
- aria-label には alt Prop が優先的に使われ、未指定の場合は name Prop、それも無い場合はフォールバックの avatar-label（デフォルト Avatar、i18n 対応）が使われます。
- 画像表示時の <img> 要素には alt 属性として alt（未指定時は name）が設定され、loading="lazy" で遅延読み込みされます。画像の読み込みに失敗した場合は自動的にイニシャル／フォールバックアイコン表示へ切り替わります。
- 画像も name（イニシャル）も無い場合に表示されるデフォルトのフォールバックアイコン（SVG）は装飾的要素のため aria-hidden="true" が付与され、ルートの aria-label によって名前が読み上げられます。
対話要素: このコンポーネントは表示専用で、クリックなどの対話的な振る舞いやキーボード操作は持ちません。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`alt`	`alt`	alt テキスト	`string`	`''`
`avatarLabel`	`avatar-label`	フォールバックラベル（i18n対応）	`string`	`'Avatar'`
`color`	`color`	カラー（イニシャル背景）	`"brand" \| "danger" \| "neutral" \| "success" \| "warning"`	`'neutral'`
`name`	`name`	名前（イニシャル生成用）	`string`	`''`
`shape`	`shape`	形状	`"circle" \| "square"`	`'circle'`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`src`	`src`	画像URL	`string`	`''`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	カスタムコンテンツ（アイコン等）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS