Components · Avatar
Avatar
Müşteri, kurye, kullanıcı temsili — beş boyutlu ölçek, fotoğraf veya inisyal fallback'i, durum noktası ve grup overlap. Renk paleti deterministic (isimden hash'lenir) ve marka tonlarıyla uyumlu.
01 · Boyut ölçeği
xs 20 · sm 28 · md 36 · lg 48 · xl 64 · 2xl 88 — kullanım yerine göre seç
AY
xs · 20
AY
sm · 28
AY
md · 36
AY
lg · 48
AY
xl · 64
AY
2xl · 88
02 · Foto + inisyal fallback
Foto yoksa baş harfler — renk tonu isim hash'inden seçilir, kullanıcı için sabit kalır
foto var
AY
Ahmet Yılmaz
ZK
Zehra Kaya
MD
Mehmet Demir
EÇ
Elif Çelik
BA
Burak Aksoy
?
bilinmeyen
03 · Durum noktası
Online · Away · Busy · Offline — sadece md ve üzeri boyutlarda; xs için inline status pill kullan
AY
● online
ZK
● away
MD
● busy
EÇ
● offline
AY
sm · status
ZK
md · status
MD
xl · status
04 · Avatar group
Aynı siparişi gören kuryeler, sohbete dahil temsilciler — overlap −10px, +N rozetiyle taşma
AY
ZK
MD
EÇ
+8
12 kişi (+8)
AY
ZK
MD
+2
md · status'lu
05 · Müşteri kartı kullanımı
Sipariş listesi ve müşteri panelinde — md boyut, isim + son sipariş meta
AY
Ahmet Yılmaz
12 sipariş · son 2 gün önce VIP
ZK
Zehra Kaya
3 sipariş · son 14 gün önce
MD
Mehmet Demir
28 sipariş · son 3 saat önce VIP
EÇ
Elif Çelik
1 sipariş · yeni müşteri
Yapı kuralları
· Boyut ölçeği: xs 20 · sm 28 · md 36 · lg 48 · xl 64 · 2xl 88. Tipografi boyut/3 oranıyla ölçeklenir.
· İnisyal: ad-soyad kombinasyonundan ilk harfler. Tek isimse ilk iki harf. Türkçe karakter (Ç, Ş, Ğ) korunur.
· Renk tonu: 6 paletten biri, hash(name) % 6. Aynı kullanıcı her yerde aynı tonda görünür.
· Status dot: 2px --surface ring. Online #10b981, away #f59e0b, busy #ef4444, offline #9ca3af.
· Group overlap: −10px (default), −14px (tight). Her avatarda 2px surface border.
· Maks. 4 görünür avatar, sonrası +N rozetiyle. +99+ sınırı aşılırsa 99+.
· Erişilebilirlik: foto için alt="Ahmet Yılmaz"; inisyal için aria-label. Status için aria-label="çevrimiçi".
· Foto yüklenirken: gri shimmer placeholder. Hata durumunda otomatik inisyal fallback.
· xs ve sm boyutlarda inisyal max 2 karakter; md+ için 2 karakter, hizalama optik (line-height 1).
· Yasak: avatar üzerine emoji, marka logosu veya çoklu küçük figür.