メインコンテンツへスキップ
BlueAI
ホーム/コンポーネント/データ表示/アバター Avatar

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

PropTypeDefaultDescription
namestringユーザー名(イニシャル生成用)
srcstring画像URL
size"xs" | "sm" | "md" | "lg"サイズ(デフォルト: md)
classNamestring追加CSSクラス