コンポーネント一覧
Avatar
name を必ず渡す。画像が無いときのイニシャルと、読み上げ時の氏名の両方に使われる。
デモ
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| src | string | |
| name | string | 画像の代替テキストと、fallback のイニシャル生成に使う |
| fallback | ReactNode | 画像がないときに表示する内容。未指定なら name のイニシャル |
| badge | ReactNode | 右下に重ねる小さな印。オンライン状態などに使う |
| classNames | ClassNames<typeof avatarSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- image
- fallback
- badge
アクセシビリティ
- 画像が読めないときの頭文字表示には `role="img"` と `aria-label`（`name`）を与える。 `name` を省略すると誰を指すのか伝わらない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。