Badge

Ne zaman kullanılır

Badge, bir kaydın durumunu bir bakışta okunur kılmak içindir: görev, belge ya da başvuru durumu. En çok tablolarda, listelerde ve kayıt ayrıntı sayfasının başlığında kullanılır.

Ne zaman kullanılmaz

• Bir işlem için: Badge tıklanmaz. Kullanıcının bir şey yapması gerekiyorsa Button kullanın.
• Uzun bir mesaj için: Bir cümleden uzun açıklamalarda Banner ya da InlineAlert kullanın.
• Etiketleme ya da filtre için: Kullanıcının ekleyip kaldırdığı etiketlerde Tag kullanın.

Anatomi

Rozet12

1. Kapsayıcıarka plan, kenarlık ve tam yuvarlak köşe; yüksekliği `size` ile 16 ya da 20 px.
2. Etiketdurumu bir ya da iki kelimeyle söyleyen metin.

Davranış

• Badge durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Metin tek satırdır ve kırılmaz; uzun metin Badge’i genişletir.
• Badge ekrana gelirken 110 ms’de belirir. Durum değiştiğinde Badge’e yeni bir key verin; yeni durum aynı geçişle yerine gelir, eskisi kayarak ya da sallanarak gitmez.

Sayı ve nokta

• count, bir gezinme öğesinin ya da sekmenin yanında okunmamış öğe sayısı içindir; max üstü 99+ olur.
• dot, yeni bir şeyi metinsiz işaretler. Rengi tek başına anlam taşımaz: ekran okuyucu için label verin, görünen yerde anlamı çevredeki metin taşısın.

Yönergeler

Durumu metin taşısın

Renk körlüğü olan kullanıcılar ve ekran okuyucular rengi görmez. Badge’in metni, renk olmadan da durumu anlatmalı.

Reddedildi

YapınMetin durumu kendisi söylüyor; renk yalnızca destekliyor.

Durum

YapmayınAnlamı yalnızca renk taşıyor; metin bir şey söylemiyor.

Tonu anlamına göre seçin

Ton süs için değil, anlam içindir. Aynı durum ürünün her yerinde aynı tonla görünmeli.

Beklemede

YapınBeklemedeki kayıt uyarı tonunda: kullanıcı bir şey bekliyor.

Beklemede

YapmayınMarka tonu bir durumu anlatmaz, yalnızca dikkat çeker.

Belirgin varyantı az kullanın

Bir tablonun her satırında belirgin varyant olunca hiçbiri öne çıkmaz.

BaşarılıBaşarılıTehlike

YapınListede sade vurgu; göz satırları rahat tarar.

BaşarılıBaşarılıTehlike

YapmayınHer satırda belirgin varyant: asıl sorunlu kayıt kayboluyor.

Badge’i Button gibi kullanmayın

Badge tıklanabilir görünmez ve klavyeyle ulaşılamaz. Bir işlem gerekiyorsa durumu Badge ile, işlemi Button ile gösterin.

BaşarısızYeniden dene

YapınDurum Badge'de, yapılacak işlem Button'da.

Yeniden dene

Yapmayınİşlem Badge'e yazılınca kullanıcı tıklayamaz.

Ekran okuyucu ve kontrast ayrıntıları Erişilebilirlik sekmesinde.

İçerik

• Bir ya da iki kelime yazın. Cümle düzeninde: “Onaylandı”, “İnceleniyor”.
• Durumu geçmiş zaman ya da sıfat olarak yazın (“Onaylandı”, “Beklemede”); emir kipinden kaçının.
• Noktalama ve ünlem kullanmayın, kısaltma yapmayın.
• Aynı durum için ürünün her yerinde aynı kelimeyi kullanın.

Türkçe	İngilizce	Ton
Onaylandı	Approved	success
Beklemede	Pending	warning
İnceleniyor	In review	info
Reddedildi	Declined	danger
Arşivlendi	Archived	neutral
Taslak	Draft	neutral

Platformlar

• Masaüstü: Tablolarda durum sütununda, sola hizalı durur.
• Mobil: Liste öğesinde başlığın yanında ya da altında durur. Satır genişliği daraldığında metin kısaltılmaz, Badge alt satıra iner.

İlgili bileşenler

• Button: Durumla ilgili bir işlem gerekiyorsa Badge’in yanına Button koyun.
• TextInput: Form alanlarının durumu (geçersiz, devre dışı) Badge ile değil, alanın kendi durumlarıyla gösterilir.