İçerik · Badge

Rozet

Bir öğenin yanında küçük bir sayı veya kısa bir kelime gösterir. Etiketten küçüktür.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Sayı ve kelime Canlı örnek

Bildirimler 12 Taslak Yeni Beta

HTML kodunu göster

<a class="kiris-link" href="#">Bildirimler <span class="kiris-rozet kiris-rozet--sayi">12</span></a>
<span class="kiris-rozet">Taslak</span>
<span class="kiris-rozet kiris-rozet--kirmizi">Yeni</span>
<span class="kiris-rozet kiris-rozet--mavi">Beta</span>

Ne zaman kullanılır

Okunmamış bildirim sayısı gibi bir sayı için kullanın.
"Yeni" gibi tek kelimelik bir işaret için kullanın.
Başvuru durumu için etiket kullanın. Rozet cümle taşımaz.

Erişilebilirlik

Sayı rozeti bağlamını metinden alır: "Bildirimler 12". Tek başına 12 anlamsızdır.
Yalnız renkle anlam vermez. Kırmızı rozet "Yeni" yazar.

Karşılanan WCAG 2.2 ölçütleri 1.4.1 1.4.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FR, KR, DK, DE, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-badge ile başlayan sınıflar