Avatar
ユーザーのアバターを表示するコンポーネント。名前からイニシャルを自動生成し、画像指定時はフォールバック付きで表示。
|
import { Avatar } from "@blueai/ui"Examples
Sizes
田田田田
<Avatar name="田中太郎" size="xs" />
<Avatar name="田中太郎" size="sm" />
<Avatar name="田中太郎" size="md" />
<Avatar name="田中太郎" size="lg" />Different names
ABC?
<Avatar name="Alice" />
<Avatar name="Bob" />
<Avatar name="Carol" />
<Avatar />With image (broken src fallback)
<Avatar name="田中太郎" src="https://invalid-url.example/avatar.png" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | ユーザー名(イニシャル生成用) |
| src | string | — | 画像URL |
| size | "xs" | "sm" | "md" | "lg" | — | サイズ(デフォルト: md) |
| className | string | — | 追加CSSクラス |