Components · Feedback

Banner & Alert

Sayfa bağlamına yapışık duyurular. Inline alert: sayfa içinde, ilgili alana yakın (form üstü, kart başı). Page banner: tüm sayfanın üstünde, sistem-geneli durum (bakım, abonelik bitiş). Toast'tan farkı: kullanıcı manuel kapatana kadar durur, alanı işgal eder.

01 · Inline alert · 4 ton

WhatsApp Business doğrulaması bekleniyor
Meta hesabınız 24-48 saat içinde onaylanacak. Onaylanana kadar mesaj gönderemezsiniz; siparişler kayıt altına alınmaya devam eder.
×
Menü güncellendi
12 ürün yayına alındı, 2 ürünün stoğu güncellendi. Müşteriler yeni menüyü 1 dakika içinde görecek.
×
Beklemedeki ödeme: 3 sipariş · 412,50 TL
Müşteriniz iyzico üzerinden ödeme başlattı ama tamamlamadı. 30 dakika içinde tamamlanmazsa siparişler otomatik iptal olur.
×
Kurye atama başarısız
Yakındaki tüm kuryeler dolu. Sipariş #1247 için manuel atama yapın veya 5 dakika içinde tekrar deneyin.
×

02 · Page banner · sayfa üstü

Tam genişlik, simgesiz, tek satır CTA — sistem-geneli durum
↑ banner · sayfa içeriği aşağıda

03 · Inline alert vs Toast vs Banner

Karar Inline alert Toast Banner
Konumİlgili alanın yakınıSağ altSayfa üstü, full-bleed
SüreSorun çözülene kadar~6sn → otomatik kapatManuel kapatılana kadar
AciliyetBağlamla ilgiliGeçici onaySistem-geneli
AksiyonVar (1-2 link)Opsiyonel "Geri al"Tek CTA

Kurallar

· 4 ton: info (bilgi), success (onay — yeşil tint kullanılmaz, gri-100 + emerald-700 metin + dot), warning (dikkat), danger (hata).
· Başlık zorunlu — gövde opsiyonel. Tek satır mesaj başlık olarak yazılır.
· Action max 2 link — daha fazlasına ihtiyaç varsa modal'a geç.
· Kapatma butonu sadece kullanıcı bilgilendirme alertlerinde — danger/error alert'lerde "kapat" yok, problem çözülünce kendi kaybolur.
· Banner full-bleed; içeriğe değil, viewport'a yapışır. Top nav'ın altında; hem sticky hem değil.
· Erişilebilirlik: role="alert" sadece dinamik olarak görünenler için; statik alert role="status". Kapat butonu aria-label="Kapat".
· Yasak: dekoratif gradient, drop shadow, ikon hareketi. Alert sakin yüzeydir.