---
title: "Alert Dialog"
description: "Bir aksiyonu onaylatan modal. Yalnızca butonlarıyla kapanır; dışarı tıklamak kapatmaz."
---

<Callout type="info" title="Ne zaman kullanılır">
Geri alınamayan ya da etkisi büyük aksiyonlar: silme, bağlantı kesme, toplu değişiklik. Tablo satırındaki küçük silmeler için [Confirm Button](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/confirm-button) yeterlidir; form veya uzun içerik için Dialog kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/alert-dialog
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Silme onayı

AlertDialogMedia tone="danger" ikonu kırmızıya boyar, AlertDialogAction color="red" yıkıcı butonu verir. Açıklamada neyin etkileneceğini somut yazın.

**Örnek: Silme onayı** (`alert-dialog/destructive`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/alert-dialog/destructive)

```tsx
import { Trash2Icon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export default function AlertDialogDestructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline" color="red">
          <Trash2Icon data-icon="inline-start" />
          Kuralı sil
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia tone="danger">
            <Trash2Icon />
          </AlertDialogMedia>
          <AlertDialogTitle>“Kargo bedava” kuralı silinsin mi?</AlertDialogTitle>
          <AlertDialogDescription>
            Kural hemen devre dışı kalır ve 14 aktif sepetteki indirim kaldırılır. Bu işlem geri alınamaz.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction color="red" onClick={() => toast.success("Kural silindi")}>
            Sil
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

### Küçük

size="sm" başlığı ortalar ve iki butonu eşit genişlikte yan yana dizer. Kısa onaylar için.

**Örnek: Küçük** (`alert-dialog/small`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/alert-dialog/small)

```tsx
import { UnplugIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export default function AlertDialogSmall() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Bağlantıyı kes</Button>
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia tone="warning">
            <UnplugIcon />
          </AlertDialogMedia>
          <AlertDialogTitle>Bağlantı kesilsin mi?</AlertDialogTitle>
          <AlertDialogDescription>Eşitleme durur. İstediğiniz zaman yeniden bağlanabilirsiniz.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Bağlantıyı kes</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Başlığı soru olarak yazın: “Kural silinsin mi?”.
- Aksiyon butonunda fiili tekrar edin: “Sil”, “Bağlantıyı kes”; “Tamam” yazmayın.
- İşlem uzun sürecekse onClick'te preventDefault ile açık tutup bitince kapatın.

**Yapmayın:**

- Her kaydetmede onay sormayın; yalnızca geri alınamayan işlemlerde kullanın.
- Vazgeç butonunu kaldırmayın.

## API

shadcn/ui ile aynı parçalar. `AlertDialogCancel` metin verilmezse “Vazgeç” yazar. `AlertDialogAction` ve `AlertDialogCancel` Button'ın variant, size ve color prop'larını alır.

### `AlertDialogContent`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm"` | `"default"` | default sola hizalı; sm başlığı ortalar ve iki eşit buton verir. |

### `AlertDialogMedia`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `tone` | `keyof typeof tones` | `"neutral"` | İkon kutusunun durum rengi: danger, warning, info, success, neutral. |