Bileşenler
Avatar
Bir kişinin ya da hesabın görseli: fotoğrafı, baş harfleri ya da bir ikon; isteğe bağlı durum ve bildirim işaretleriyle.
Playground
Figma varyantı
💅 Style=Image
👕 Size=Medium
🕹 State=Default
🟢 Status=False
🔔 Notification=FalseTipler
İçerik stili belirler: görsel, isimden baş harfler ya da ikon. Baş harfler ve ikonlar primary soft zemindedir.
Boyutlar
XLarge ve Medium kart köşesini kullanır; Small, Tiny ve Micro yuvarlaktır. Tiny ve Micro tek harf gösterir.
| Size | Box | Radius | Initials | Icon | Status | Notification |
|---|---|---|---|---|---|---|
| xlarge | 72px | --radius-card | ui/text lead/bold | 36px | 12px | 20px |
| medium | 48px | --radius-card | ui/text/bold | 24px | 8px | 20px |
| small | 32px | --radius-full | ui/text/bold | 16px | 8px | 16px |
| tiny | 24px | --radius-full | ui/text small/bold | 12px | 4px | — |
| micro | 16px | --radius-full | ui/footnote/bold | 8px | — | — |
Durum ve bildirim
Durum noktası alt-son köşededir (Micro’da yok); bildirim baloncuğu üst-son köşeye taşar (XLarge, Medium ve Small).
222Avatar Group
Overlap her avatarı 8px geri kaydırır; Spaced 8px grup içi boşluğu korur. Sondaki bir buton kişi ekleyebilir.
Tokenlar
| Part | Token |
|---|---|
| Initials / icon background | --color-primary-soft |
| Initials / icon | --color-foreground-high-emphasis |
| Ring (1px outside) | --color-surface-level-1 |
| Status | --color-success, 2px --color-surface-level-1 ring |
| Notification | --color-primary / --color-on-primary, 2px --color-surface-level-1 ring |
| Hover | --shadow-focus-primary |
| Group gap | --space-form-ingroup-gutter |
Figma notları
- XLarge Name Surname 24px köşe kullanırken XLarge görsel ve ikon 16px kullanıyor; kod tüm XLarge için kart köşesini (16px) kullanır.
- Hover durumu primary focus gölgesidir; kod, avatar hover ya da focus olan bir link veya butonun içindeyken gösterir.
- Small bildirim Name Surname ve Icon’da x 24’te, Image’da x 26’da, bir Small varyantta da y −4’te; kod her boyutta köşenin 8px üstüne koyar.
- Gruptaki avatarların 1px çizgisi ham bir renk; kod surface/level-1 kullanır.
- İkon rengi Figma’da bağlı değil; kod baş harfler gibi foreground/high-emphasis kullanır.
Figma’dan koda
| Figma | React |
|---|---|
| 💅 Style = Image / Name Surname / Icon | src="…" / name="…" / icon={<Icon… />} |
| 👕 Size = XLarge / Medium / Small / Tiny / Micro | size='xlarge' / 'medium' / 'small' / 'tiny' / 'micro' |
| 🕹 State = Hover | inside a hovered link or button (data-state="hover" in docs) |
| 🟢 Status = True | status |
| 🔔 Notification = True | notification={2} |
| Avatar Group / Property 1 = Overlap / Spaced | <AvatarGroup layout='overlap' | 'spaced'> |