kaze風
Avatar
アバター
プレビュー
使いどころ
使う場面
- ユーザーや組織を、画像かイニシャルで識別する（コメント、担当者、メンバー一覧）
- 画像が無い・読み込めないときのために、fallback にイニシャルや頭文字を渡す
- size は xs / sm / md / lg の 4 段階。文脈に合わせて選び、同じリストの中では統一する
使わない場面
- ロゴや商品写真。img か Logo を使う
- 状態や属性を示すこと。Badge を使う
- 名前が近くに表示されていないのに、画像だけで人を特定させること。名前も添える
使い方
<Avatar fallback="KZ" size="md" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "md" | アバターのサイズ |
src | string | なし | アバター画像のURL |
alt | string | なし | 画像の代替テキスト |
fallback | string | なし | 画像がない場合に表示するテキスト（イニシャルなど） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- src があるときは <img> が出て、alt が名前になる。alt を省略すると空文字になり、読み上げられない。名前が隣に表示されているときは省略でよく、単独で人を表すときは alt に名前を入れる
- fallback のテキスト表示のときは role="img" と aria-label に fallback が入る。fallback が「M」のような頭文字だけだと名前が伝わらないので、隣に氏名を置くか、aria-label を渡す
文言
- fallback は 1〜2 文字。日本語は姓の 1 文字、英字は名と姓の頭文字にする