İçerik · Tag

Etiket

Bir kaydın durumunu kısa bir sözcükle gösterir.

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

Örnekler

Durumlar Canlı örnek

İnceleniyor Onaylandı Reddedildi Belge bekleniyor Başlanmadı

HTML kodunu göster

<span class="trds-etiket trds-etiket--mavi">İnceleniyor</span>
<span class="trds-etiket trds-etiket--yesil">Onaylandı</span>
<span class="trds-etiket trds-etiket--kirmizi">Reddedildi</span>
<span class="trds-etiket trds-etiket--sari">Belge bekleniyor</span>
<span class="trds-etiket trds-etiket--gri">Başlanmadı</span>

Ne zaman kullanılır

Başvuru durumu gibi bir durumu göstermek için kullanın.
Bağlantı veya düğme olarak kullanmayın.

Erişilebilirlik

Metin her zaman bulunur. Yalnız renk kullanmayın.
Beş renk seçeneğinin hepsi 4.5 üzerinde kontrast sağlar.

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: UK, US, FR, IE, KR, JP, DK, NO.