Avatar

Stablev0.3.0

ユーザーのプロフィール画像やイニシャルを表示するコンポーネント。画像がない場合はフォールバックを表示します。

基本的な使い方

画像URLまたはフォールバックイニシャルを表示

tsx

class="token keyword">import { Avatar } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">class=class="token keyword">class="token string">"token comment">// 画像付き
<class="token tag">Avatar
  src=class="token keyword">class="token string">"https:class="token keyword">class="token commentclass="token keyword">class="token string">">//example.com/avatar.jpg"
  alt=class="token keyword">class="token string">"User Name"
  fallback=class="token keyword">class="token string">"UN"
/>

class="token keyword">class=class="token keyword">class="token string">"token comment">// フォールバックのみ
<class="token tag">Avatar fallback=class="token keyword">class="token string">"TY" />

サイズ

5つのサイズバリエーション

画像付き

様々なユーザー画像

AvatarGroup

複数のアバターを重ねて表示

小

中

大

tsx

<class="token tag">AvatarGroup size=class="token keyword">class="token string">"md">
  <class="token tag">Avatar src=class="token keyword">class="token string">"..." alt=class="token keyword">class="token string">"User class="token number">1" fallback=class="token keyword">class="token string">"U1" />
  <class="token tag">Avatar src=class="token keyword">class="token string">"..." alt=class="token keyword">class="token string">"User class="token number">2" fallback=class="token keyword">class="token string">"U2" />
  <class="token tag">Avatar src=class="token keyword">class="token string">"..." alt=class="token keyword">class="token string">"User class="token number">3" fallback=class="token keyword">class="token string">"U3" />
  <class="token tag">Avatar fallback=class="token keyword">class="token string">"+class="token number">5" />
</class="token tag">AvatarGroup>

使用例

実際の使用シーン

田中太郎

tanaka@example.com

佐藤花子2時間前

素晴らしいプロジェクトですね！参加させてください。

チームメンバー

4人のメンバー

Props API

Prop	Type	Default	Description
`src`	`string`	-	画像URL
`alt`	`string`	-	代替テキスト
`fallback`	`string`	-	画像がない場合のフォールバック（イニシャル）
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	サイズ

Accessibility

img要素にalt属性を設定
画像読み込み失敗時はフォールバックを表示
フォールバックは aria-hidden で隠される（altで説明済み）
AvatarGroup は適切なグループラベルを持つ