Geri bildirim · Alert

Uyarı

Sayfa içinde bilgi, başarı, uyarı veya hata mesajı gösterir.

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

Örnekler

Bilgi Canlı örnek

Başvurunuz alındı. Başvuru numaranız: 2026-004512.

HTML kodunu göster

<div class="trds-uyari trds-uyari--bilgi" role="status">
  <p><strong>Başvurunuz alındı.</strong> Başvuru numaranız: 2026-004512.</p>
</div>

Hata Canlı örnek

Ödeme tamamlanmadı. Kart bilgilerinizi kontrol edin ve yeniden deneyin.

HTML kodunu göster

<div class="trds-uyari trds-uyari--hata" role="alert">
  <p><strong>Ödeme tamamlanmadı.</strong> Kart bilgilerinizi kontrol edin ve yeniden deneyin.</p>
</div>

Ne zaman kullanılır

İşlem sonucunu bildirmek için kullanın.
Form alanı hatası için hata mesajı bileşenini kullanın.

Erişilebilirlik

Dört tür ikonla ve metinle ayırt edilir. Renk tek işaret değildir.
Sayfa yüklendikten sonra eklenen uyarı role="status" taşır.
Acil bir durum için role="alert" kullanın.

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

Kaynak

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