---
title: "Confirm Button"
description: "Dialog gerektirmeyen yıkıcı aksiyonlar için iki adımlı satır içi onay. İlk tıklama kırmızıya döner ve etiketi değiştirir, ikincisi onaylar."
---

<Callout type="info" title="Ne zaman kullanılır">
Satır silme, kalanı iptal etme gibi geri alınabilir veya küçük kapsamlı yıkıcı aksiyonlarda. Kalıcı ve büyük silmeler için Dialog kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/confirm-button
```

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

## Örnekler

### Satır silme

Onaylanan satır yüksekliği daralarak listeden çıkar.

**Örnek: Satır silme** (`confirm-button/row`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/confirm-button/row)

```tsx
import * as React from "react"
import { AnimatePresence, motion } from "motion/react"
import { Trash2Icon } from "lucide-react"
import { toast } from "sonner"

import { ConfirmButton } from "@/components/ikas/confirm-button"

const initial = ["Hafta sonu fırsatı", "Kargo bedava çantası", "Yeni sezon tişört"]

export default function ConfirmButtonRow() {
  const [rows, setRows] = React.useState(initial)

  return (
    <div className="w-full max-w-md overflow-hidden rounded-xl bg-card shadow-card">
      <ul className="divide-y">
        <AnimatePresence initial={false}>
          {rows.map((name) => (
            <motion.li
              key={name}
              exit={{ opacity: 0, height: 0, transition: { opacity: { duration: 0.12 }, height: { duration: 0.2, delay: 0.04 } } }}
              className="overflow-hidden"
            >
              <div className="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                {name}
                <ConfirmButton
                  size="xs"
                  variant="ghost"
                  confirmLabel="Silinsin mi?"
                  onConfirm={() => {
                    setRows((r) => r.filter((n) => n !== name))
                    toast(`${name} silindi`)
                  }}
                >
                  <Trash2Icon data-anim="wiggle" />
                  Sil
                </ConfirmButton>
              </div>
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
      {rows.length === 0 && (
        <button type="button" onClick={() => setRows(initial)} className="w-full px-4 py-6 text-center text-sm text-muted-foreground hover:text-foreground">
          Hepsi silindi. Geri yükle
        </button>
      )}
    </div>
  )
}
```

### Sonucu söyleyen onay

confirmLabel neyin olacağını tam olarak söylesin: “Kalan 4 adet iptal edilsin mi?”

**Örnek: Sonucu söyleyen onay** (`confirm-button/cancel`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/confirm-button/cancel)

```tsx
import { toast } from "sonner"

import { ConfirmButton } from "@/components/ikas/confirm-button"

export default function ConfirmButtonCancel() {
  return (
    <div className="flex w-full max-w-md items-center justify-between gap-4 rounded-xl bg-card p-4 shadow-card">
      <div className="flex flex-col">
        <span className="text-sm font-medium">Tedarikçi siparişi #482</span>
        <span className="text-[13px] text-muted-foreground">6 adetten 2&apos;si teslim alındı</span>
      </div>
      <ConfirmButton size="sm" confirmLabel="Kalan 4 adet iptal edilsin mi?" onConfirm={() => toast.success("Kalan 4 adet iptal edildi")}>
        Kalanı iptal et
      </ConfirmButton>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Kurulu etiketi bir soru olarak yazın ve sonucu söyleyin.

**Yapmayın:**

- Hesap silme veya uygulamayı kaldırma gibi geri dönüşü olmayan işlemler için kullanmayın.

## API

### `ConfirmButton`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `onConfirm` (zorunlu) | `() => void` | - | İkinci tıklamada çalışır. |
| `confirmLabel` | `React.ReactNode` | `"Emin misiniz?"` | Kurulu durumdaki etiket. |
| `timeout` | `number` | `3000` | Bu süre içinde onaylanmazsa eski haline döner (ms). Odaktan çıkınca da döner. |

Diğer tüm `Button` prop'ları, kurulu değilken Button'a aynen geçer.