Bileşenler

Badge

Bir kaydın durumunu kısa bir metinle ve renkle gösterir.

28 Ekim 2026

Kırıcı değişiklik

emphasis prop’unun adı variant oldu (subtle, bold). Geçiş: emphasis="bold" → variant="bold".
badge-height ve badge-padding-inline token’ları boyuta göre ikiye ayrıldı: badge-height-sm|md, badge-padding-inline-sm|md.

Eklendi

Badge ekrana gelirken motion.reveal ile 110 ms’de belirir; durum değişince yeni bir key ile aynı geçişle yenilenir.
size (sm 16 px, md 20 px; varsayılan md).
Metnin önünde süs ikonu için startIcon (12 px, badge-icon-size).
data-component="badge" özniteliği.
Güçlü varyantta metin kontrastı her ton, marka ve modda en az 4.5:1 (en düşük: açık modda uyarı 4.72:1, başarılı 5.03:1, tehlike 5.63:1); token testi her derlemede denetliyor.
count ve max: metin yerine sayı, max üstü 99+; dot: metinsiz ton noktası; ikisinde ekran okuyucu metni label.
variant="outline": dolgusuz, ton renginde kenarlık ve metin.
badge-dot-size bileşen token’ı.

Değişti

Yeni kategori tonları violet, teal ve pink: pastel etiket çiftleri; bold varyantta zemin ve metin yer değiştirir.
Durum tonları pastel zemin, kenarlık ve metin çiftlerini kullanıyor.
variant="outline" violet, teal ve pink kategori renklerini de kapsar (tag-*-border, tag-*-foreground); nötr tonda kenarlık status-neutral-border olur.

Eklendi

İlk sürüm: altı ton (neutral, brand, info, success, warning, danger) ve iki vurgu (subtle, bold).
Renkler ve ölçüler token’lardan geliyor; açık ve koyu mod ile marka değişimi ek ayar gerektirmiyor.
Her ton ve vurgu için metin kontrastı token testinde denetleniyor.