AlertDialog

Ne zaman kullanılır

AlertDialog, devam etmeden önce açık bir karar gereken durumlar içindir: bir öğeyi silmek, önceki sürümün üzerine yazmak, kaydedilmemiş değişiklikleri bırakmak.

Ne zaman kullanılmaz

• Form ya da birden çok alan için: Dialog kullanın.
• Geri alınabilen işlemler için: İşlemi yapın ve Geri al eylemli bir bildirim gösterin.
• Bilgi vermek için: Satır içi uyarı kullanın.

Anatomi

Öğeyi sil

AçıkKoyu

Kodu kopyala

import { AlertDialog, Button } from '@bigbang/ui';

export default function Danger() {
  return (
    <AlertDialog
      tone="danger"
      icon="trash"
      trigger={
        <Button variant="secondary" tone="danger">
          Öğeyi sil
        </Button>
      }
      title="Öğe silinsin mi?"
      description="Bu işlem geri alınamaz."
      confirmLabel="Sil"
      onConfirm={() => {}}
    />
  );
}

1. Başlık: Kararı soru olarak sorar.
2. Açıklama: Onaylanırsa ne olacağını anlatır.
3. Vazgeç: İkincil buton; odak burada başlar.
4. Onay: Kararı tekrarlayan birincil buton; yıkıcıysa kırmızı.
5. Simge (isteğe bağlı): icon ile başlığın yanında 40 px’lik kutu; danger tonunda kırmızı zemin. Süs amaçlıdır, ekran okuyucu okumaz.

Davranış

• Arka plana tıklamak pencereyi kapatmaz; Escape ve Vazgeç kapatır.
• Odak açılışta Vazgeç’e gelir.
• Onay butonu onConfirm’u çağırır; senkron işlemde pencere hemen kapanır.
• Promise döndüren işlemde pencere meşgul (aria-busy) olur, onay butonu yükleniyor durumuna geçer, Vazgeç ve Escape çalışmaz.
• Promise reddedilirse pencere açık kalır; hatayı gövdede gösterin.
• Her zaman ortadadır; dar ekranda alttan sayfaya dönüşmez.

Yönergeler

• Başlığı soru olarak yazın: “Öğe silinsin mi?”.
• Onay etiketi başlıktaki fiili tekrarlasın: “Sil”. “Tamam” ya da “Evet” kullanmayın.
• Açıklamada geri alınamayan sonucu açıkça yazın.
• Her işlem için onay istemeyin; yalnızca geri dönüşü olmayanlar için.

İçerik

Türkçe	İngilizce
Öğe silinsin mi?	Delete item?
Bu işlem geri alınamaz.	This cannot be undone.
Sil	Delete
Vazgeç	Cancel

Cam

Provider material="glass" altında onay penceresi daha yüksek kontrastlı tonla cama döner. material="solid" onu opak tutar. children uzun bir liste içeriyorsa material="solid" verin.

İlgili bileşenler

• Dialog: Görev ve formlar için pencere.
• Button: tone="danger" ve yükleniyor durumu.