KARAKURIDESIGN SYSTEM

Avatar

Avatarは、ユーザーやエンティティを視覚的に表すコンポーネントです。 画像、イニシャル、アイコンのフォールバックをサポートし、ステータス表示やグループ表示にも対応します。

2
Shapes
6
Sizes
4
Status
Radix
Base

Playground

Preview
D
JD
Size
Shape
Content
Options
Status
<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Sizes

xs
サイズ24px
フォント10px
ドット6px
sm
サイズ32px
フォント12px
ドット8px
default
サイズ40px
フォント14px
ドット10px
lg
サイズ48px
フォント16px
ドット12px
xl
サイズ64px
フォント20px
ドット14px
2xl
サイズ80px
フォント24px
ドット16px

Features

Shapes

JD
Circle
JD
Square

Status

JD
online
JD
offline
JD
busy
JD
away

Fallback

画像が読み込めない場合、イニシャルまたはアイコンがフォールバックとして表示されます。

JD
Image + Fallback
JD
Initials
Icon

Avatar Group

複数のアバターを重ねて表示します。maxで表示数を制限できます。

JDEBMKRS
JDEBMK+2

API

Component Structure

Avatar— Radix Avatar
.ImageProps.FallbackProps.GroupProps

Props

Avatar

size"default"
"xs" | "sm" | "default" | "lg" | "xl" | "2xl"

アバターのサイズ (24/32/40/48/64/80px)

shape"circle"
"circle" | "square"

形状 (円形/角丸正方形)

statusundefined
"online" | "offline" | "busy" | "away"

ステータスドットの表示

AvatarImage

srcundefined
string

画像のURL

altundefined
string

画像の代替テキスト

onLoadingStatusChangeundefined
(status: "idle" | "loading" | "loaded" | "error") => void

読み込み状態の変更コールバック

AvatarFallback

size"default"
"xs" | "sm" | "default" | "lg" | "xl" | "2xl"

フォントサイズのスケーリング用

nameundefined
string

名前からイニシャル+カラーを自動生成。childrenがある場合はイニシャルを上書き

colorizedundefined
string

カラーのみ自動適用（イニシャルは手動）。nameがある場合はnameが優先

colorVariant"vivid"
"vivid" | "soft"

カラースタイル: vivid (濃い背景+白文字) / soft (淡い背景+濃い文字)

delayMsundefined
number

フォールバック表示の遅延時間 (ms)

AvatarGroup

maxundefined
number

最大表示数。超過分は "+N" で表示

size"default"
"xs" | "sm" | "default" | "lg" | "xl" | "2xl"

子アバターのサイズ ("+N" バッジに適用)

shape"circle"
"circle" | "square"

子アバターの形状 ("+N" バッジに適用)

Customization

name propを渡すだけで、イニシャルとカラーを自動生成できます。

name prop — イニシャル + カラー自動生成

JD
John
EB
Emma
MK
Michael
RS
Rachel
TW
Tina
<AvatarFallback name="John Doe" /> {/* → "JD" + color */} <AvatarFallback name="Emma Brown" /> {/* → "EB" + color */}

Vivid vs Soft

Vivid (default)

Google / Slack / Teams

JDEBMKRSTW
<AvatarFallback name={name} />
Soft

Notion / Linear

JDEBMKRSTW
<AvatarFallback name={name} colorVariant="soft" />

CJK 対応

김민
김민수
→ "김민"
田中
田中太郎
→ "田中"
李明
李明
→ "李明"
<AvatarFallback name="김민수" /> <AvatarFallback name="田中太郎" /> <AvatarFallback name="李明" />

画像 + フォールバック

JD
画像あり
JD
フォールバック
<Avatar> <AvatarImage src={url} alt={name} /> <AvatarFallback name={name} /> </Avatar>

Tip：同じnameは常に同じ色になります（決定的ハッシュ）。childrenを渡すと自動イニシャルを上書きできます。