Components · Badge / Counter
Badge ve sayaç
Dikkat çekmesi gereken sayısal değerler ve durum noktaları. Pill tabanlı numerik sayaç (1–99 arası, üstü 99+), boyut versiyonları, renk varyantları ve indirgenmiş "dot" formu. Her zaman bir anchor'a tutunur — tek başına dolaşmaz.
01 · Sayısal sayaç
tabular-nums, 1–99, üstü "99+"
1
3
12
99
99+
3
247
02 · Renk varyantları
Anlamsal — dikkat seviyesine göre
5danger · default
5primary
5warning
5info
5subtle
03 · Anchor patternleri
Icon button, sidebar nav, avatar
Kurallar
· Min boyut 18×18 (tıklanabilir DEĞİL — yalnızca görsel sinyal). Hit alanı parent anchor'a aittir.
· Sayı 99'u aşarsa 99+ göster; 1k'dan büyükse 1.2k formatı (k/M sufix, ondalık 1 hane).
· 0 değerinde gösterme — boş badge gürültüdür. İstisna: "Yeni" sayacı her zaman görünebilir, 0 olduğunda dot'a düşer.
· Anchor'ın sağ üstünde durur, %25 dışarı taşar; iç beyaz halka border: 2px solid surface ile çizilir.
· Dot formu: 8×8 (default) veya 10×10 (avatar status). Sayısal değer iletmez, "yeni var" sinyali verir.
· Erişilebilirlik: anchor'a aria-label="Bildirimler, 3 okunmamış" eklenmeli; badge salt-görsel.
· Yasak: badge içinde simge, badge üstünde tooltip (sayının ne olduğu zaten metinde).