AlertDialog

Yanıt bekleyen modal onay penceresi. Dışarıya basınca kapanmaz ve focus önce Vazgeç butonuna gider.

Import

tsx

import { AlertDialog } from "@merid/react";

<AlertDialog.Root>
<AlertDialog.Trigger asChild>
  <Button variant="danger">Projeyi sil</Button>
</AlertDialog.Trigger>
<AlertDialog.Content>
  <AlertDialog.Title>“Northwind” silinsin mi?</AlertDialog.Title>
  <AlertDialog.Description>
    Proje ve içindeki 24 dosya kalıcı olarak silinir. Bu işlem geri alınamaz.
  </AlertDialog.Description>
  <AlertDialog.Footer>
    <AlertDialog.Cancel>Vazgeç</AlertDialog.Cancel>
    <AlertDialog.Action tone="danger">Projeyi sil</AlertDialog.Action>
  </AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>

Anatomi

tsx

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Content>
    <AlertDialog.Title />
    <AlertDialog.Description />
    <AlertDialog.Footer>
      <AlertDialog.Cancel />
      <AlertDialog.Action />
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Root, Trigger, Title, Description ve Footer, Dialog'daki parçalarla aynıdır. Cancel, dialog'u kapatan ve ilk focus'u alan secondary bir Button'dır; Action onaylayıp kapatan primary (ya da tone="danger") bir Button'dır. İkonlu kapatma butonu yoktur.

Örnekler

Yıkıcı işlem onayı

Yukarıdaki örnek tipik kullanımdır: nesnenin adını ver, sonucunu söyle ve Action butonunda fiili tekrarla.

İş sürerken dialog'u açık tutmak

Dialog'u açık tutmak için Action'ın onClick'inde event.preventDefault() çağır, iş bitince de controlled state ile dialog'u kendin kapat.

tsx

const [open, setOpen] = useState(false);

<AlertDialog.Root open={open} onOpenChange={setOpen}>
  <AlertDialog.Content>
    <AlertDialog.Title>Proje silinsin mi?</AlertDialog.Title>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>Vazgeç</AlertDialog.Cancel>
      <AlertDialog.Action
        onClick={async (event) => {
          event.preventDefault();
          await deleteProject();
          setOpen(false);
        }}
      >
        Sil
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

API referansı

AlertDialog.Root

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`children`	`ReactNode`	–	Trigger, Content ve bu dialog'un state'ini paylaşan diğer her şey.

AlertDialog.Content

role dışındaki tüm <div> attribute'larını kabul eder. Dışarıya basmak onu asla kapatmaz.

Prop	Tip	Varsayılan	Açıklama
`closeOnEscape`	`boolean`	`true`	Escape ile kapanır.
`initialFocus`	`RefObject<HTMLElement \| null>`	–	Açılınca focus alacak eleman. Verilmezse önce [data-autofocus] (Vazgeç butonu), sonra ilk tab'lanabilir eleman.
`container`	`Element \| null`	`document.body`	Portal hedefi. `undefined` verilirse `document.body` kullanılır; `null` verilirse hedef oluşana kadar hiçbir şey render'lanmaz.
`showClose`	`boolean`	`false`	Sağ üstteki standart ikonlu kapatma butonunu otomatik render'lar. Kendi ikonlu `Close`'unu render'ladığında atlanır.
`closeLabel`	`string`	`"Close"`	Otomatik kapatma butonunun erişilebilir adı. `showClose` açıksa Türkçe arayüzde `"Kapat"` ver.
`ref`	`Ref<HTMLDivElement>`	–	Dialog elemanına iletilen ref.

AlertDialog.Action

Tüm <button> attribute'larını kabul eder. tone'a göre stillenen bir Button render'lar. Handler event.preventDefault() çağırmadıkça tıklanınca kapanır.

Prop	Tip	Varsayılan	Açıklama
`tone`	`AlertDialogActionTone`	`"primary"`	Buton stili: `primary` ya da yıkıcı işlemler için `danger`. `AlertDialogActionTone` tipi `"primary" \| "danger"`.
`asChild`	`boolean`	`false`	`<button>` yerine tek child elemanı (örneğin kendi `Button`'ını) render'lar; props, ref ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

AlertDialog.Cancel

Tüm <button> attribute'larını kabul eder. Secondary bir Button render'lar ve data-autofocus taşır, bu yüzden ilk focus'u o alır.

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	`<button>` yerine tek child elemanı (örneğin kendi `Button`'ını) render'lar; props, ref ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

Trigger (asChild dahil), Title, Description ve Footer, Dialog'daki karşılıklarıyla aynı prop'ları alır.

Stil verme

AlertDialog, dialog sınıflarını yeniden kullanır (.mrd-dialog__backdrop, .mrd-dialog, .mrd-dialog__title, .mrd-dialog__description, .mrd-dialog__footer). Yüzey data-kind="alert" taşır, bu da genişliği 440px'e daraltır; DOM'dayken de data-state="open" taşır. Cancel, data-variant="secondary" ile .mrd-button olarak; Action ise data-variant'ı tone'dan gelen bir .mrd-button olarak render'lanır. AlertDialog.Content'in size prop'u yoktur.

Erişilebilirlik

WAI-ARIA Alert and Message Dialogs desenini izler. Content role="alertdialog" ve aria-modal="true" taşır; Title ile etiketlenir, Description ile açıklanır.

Tuş	Ne yapar
`SpaceEnter`	Tetikleyicideyken dialog'u açar; focus Vazgeç butonuna gider.
`Tab`	Vazgeç, Action ve diğer kontroller arasında gezer; dialog içinde başa döner.
`ShiftTab`	Focus'u geriye taşır; dialog içinde sona döner.
`Esc`	Vazgeç gibi dialog'u kapatır ve focus'u tetikleyiciye döndürür.

Kullanım ilkeleri

Yap

Tam olarak ne olacağını söyle ve Action'da fiili tekrarla: “Projeyi sil”.

Kaçın

Evet ve Hayır butonlarıyla “Emin misin?” diye sormak.

Yap

Alert dialog'ları yıkıcı ya da geri alınamaz işlemlere sakla.

Kaçın

Geri alınabilen rutin işlemler için onay istemek; onun yerine Geri al seçenekli bir toast göster.

İlgili sayfalar

Dialog: onay olmayan işler için.
Toast: geri alınabilen geri bildirimler için.