---
title: "Toast"
description: "Kısa süreli onay mesajı. Banner ile aynı durum renkleri: kartta ikon ve ince kenar, istenirse soft ton."
---

<Callout type="info" title="Ne zaman kullanılır">
Takip gerektirmeyen sonuçlar: "Kaydedildi", "Kopyalandı", "1.284 ürün eşitlendi". Mağaza sahibinin bir şey yapması gerekiyorsa Banner kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/sonner
```

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

## Örnekler

### Görünüm

Tetiklemeden, yalnızca toast'lar: popover kartı, durumu taşıyan ikon (rengi Banner ikonuyla aynı), warning ve error'da baştaki 3px'lik ince kenar, açıklama ve "Geri al" aksiyonu. Toaster `<html>` üzerindeki `dark` sınıfını izler; koyu temada ayrıca ayar gerekmez.

**Örnek: Görünüm** (`toast/preview`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/toast/preview)

```tsx
import * as React from "react"
import { toast } from "sonner"

import { Toaster } from "@/components/ui/sonner"

const TOASTER = "toast-preview"

/** Toasts on their own: a local Toaster pinned inside the frame, filled on mount. */
export default function ToastPreview() {
  React.useEffect(() => {
    // Fixed ids keep StrictMode's double effect from stacking duplicates.
    const options = { toasterId: TOASTER, duration: Infinity }
    toast.error("Kaydedilemedi", { ...options, id: "preview-error", description: "Bağlantı koptu. Değişiklikleriniz bu cihazda duruyor." })
    toast.warning("3 ürün atlandı", { ...options, id: "preview-warning", description: "Barkodu olmayan ürünler gönderilmedi." })
    toast.success("Kural silindi", {
      ...options,
      id: "preview-success",
      description: "Düşük stok uyarısı",
      action: { label: "Geri al", onClick: () => toast.dismiss("preview-success") },
    })
  }, [])

  return (
    <div className="relative mx-auto h-64 w-full max-w-[400px]">
      <Toaster id={TOASTER} expand position="bottom-center" offset={0} className="absolute! inset-0! w-full! transform-none!" />
    </div>
  )
}
```

### Türler

success, info, warning, error ve sade toast. Başarı ikonu çizilerek gelir.

**Örnek: Türler** (`toast/types`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/toast/types)

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

import { Button } from "@/components/ui/button"

export default function ToastTypes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline" onClick={() => toast.success("Ayarlar kaydedildi")}>
        Başarılı
      </Button>
      <Button variant="outline" onClick={() => toast.info("Eşitleme sıraya alındı", { description: "Yaklaşık 2 dakika içinde başlar." })}>
        Bilgi
      </Button>
      <Button variant="outline" onClick={() => toast.warning("3 ürün atlandı", { description: "Barkodu olmayan ürünler gönderilmedi." })}>
        Uyarı
      </Button>
      <Button variant="outline" onClick={() => toast.error("Kaydedilemedi", { description: "Bağlantı koptu. Tekrar deneyin." })}>
        Hata
      </Button>
      <Button variant="ghost" onClick={() => toast("Bağlantı panoya kopyalandı")}>
        Sade
      </Button>
    </div>
  )
}
```

### Soft

`<Toaster variant="soft" />` her toast'ı soft Banner gibi durum tonuyla boyar; aksiyon butonu da tonu alır. Uygulama genelinde tek yerde seçin, toast başına değiştirmeyin.

**Örnek: Soft** (`toast/soft`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/toast/soft)

```tsx
import * as React from "react"
import { toast } from "sonner"

import { Toaster } from "@/components/ui/sonner"

const TOASTER = "toast-soft"

/** variant="soft": the Banner tint on every toast. For apps that want toasts to read louder. */
export default function ToastSoft() {
  React.useEffect(() => {
    const options = { toasterId: TOASTER, duration: Infinity }
    toast.info("Eşitleme sıraya alındı", { ...options, id: "soft-info", description: "Yaklaşık 2 dakika içinde başlar." })
    toast.error("Kaydedilemedi", {
      ...options,
      id: "soft-error",
      description: "Bağlantı koptu. Tekrar deneyin.",
      action: { label: "Tekrar dene", onClick: () => toast.dismiss("soft-error") },
    })
    toast.success("Ayarlar kaydedildi", { ...options, id: "soft-success" })
  }, [])

  return (
    <div className="relative mx-auto h-56 w-full max-w-[400px]">
      <Toaster id={TOASTER} variant="soft" expand position="bottom-center" offset={0} className="absolute! inset-0! w-full! transform-none!" />
    </div>
  )
}
```

### Süre çubuğu

`<Toaster progress />` toast'ın altına süresini geri sayan 2px'lik bir çubuk ekler. İmleç toast'ların üzerindeyken durur (Sonner da süreyi durdurur), azaltılmış harekette gizlenir; süresiz ve yükleniyor toast'larda görünmez.

**Örnek: Süre çubuğu** (`toast/progress`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/toast/progress)

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

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

const TOASTER = "toast-progress"

/** progress: a 2px bar counts down the duration and stops while the pointer is over the toasts. */
export default function ToastProgress() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="outline" onClick={() => toast.success("Ayarlar kaydedildi", { toasterId: TOASTER })}>
        Kaydet (4 sn)
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.info("Rapor hazırlanıyor", {
            toasterId: TOASTER,
            description: "Hazır olduğunda e-posta ile göndereceğiz.",
            duration: 8000,
          })
        }
      >
        Rapor iste (8 sn)
      </Button>
      <Toaster id={TOASTER} progress />
    </div>
  )
}
```

### Aksiyon ve yükleniyor

Silmeden sonra "Geri al"; uzun işlerde toast.promise ile yükleniyor → tamamlandı.

**Örnek: Aksiyon ve yükleniyor** (`toast/actions`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/toast/actions)

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

import { Button } from "@/components/ui/button"

export default function ToastActions() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        variant="outline"
        color="red"
        onClick={() =>
          toast.success("Kural silindi", {
            description: "Düşük stok uyarısı",
            action: { label: "Geri al", onClick: () => toast("Kural geri yüklendi") },
            duration: 8000,
          })
        }
      >
        <Trash2Icon data-icon="inline-start" data-anim="wiggle" />
        Kuralı sil
      </Button>
      <Button
        onClick={() => {
          const sync = new Promise<number>((resolve) => setTimeout(() => resolve(1284), 1800))
          toast.promise(sync, {
            loading: "Ürünler eşitleniyor…",
            success: (count) => `${count.toLocaleString("tr-TR")} ürün eşitlendi`,
            error: "Eşitleme başarısız",
          })
        }}
      >
        Eşitlemeyi başlat
      </Button>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Başlığı geçmiş zamanla yazın: "Kural silindi".
- Geri alınabilen işlemlere "Geri al" aksiyonu ekleyin.
- Durumu toast.success / warning / error ile verin; renk ve ikon oradan gelir.

**Yapmayın:**

- Hata düzeltme adımı gerektiren durumlar için toast kullanmayın; Banner kullanın.
- Aynı anda birden fazla toast tetiklemeyin.
- Toast'lara className ile renk vermeyin.

## API

### `Toaster`

Uygulamanın kök layout'unda bir kez. Sonner'ın Toaster prop'larının hepsini alır; ikas varsayılanları: sağ alt köşe, en fazla 3 görünür toast (`visibleToasts`), 10px aralık (`gap`). `theme` verilmezse `<html>` üzerindeki `dark` sınıfını izler.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `variant` | `"surface" \| "soft"` | `"surface"` | surface: kart, durum ikonda (warning ve error'da ince kenar). soft: soft Banner gibi durum tonlu yüzey ve aksiyon. |
| `progress` | `boolean` | `false` | Süreyi geri sayan 2px çubuk. Hover'da durur, azaltılmış harekette gizlenir. |

### `toast(title, options)`

<TypeTable type={{
  "description": {
    "type": "ReactNode",
    "description": "İkinci satır. Ne olduğunu veya ne kadarını söyleyin."
  },
  "action": {
    "type": "{ label, onClick }",
    "description": "Tek aksiyon, genelde \"Geri al\". Kartta nötr outline xs buton; soft'ta durum tonlu."
  },
  "duration": {
    "type": "number",
    "description": "Geri alınabilir işlemlerde 8000–10000 verin. progress çubuğu bu süreyi izler.",
    "default": "4000"
  },
  "toast.success / info / warning / error": {
    "type": "function",
    "description": "Durumu ikon (ve warning/error'da ince kenar) taşır; soft'ta tüm yüzey."
  },
  "toast.promise(promise, { loading, success, error })": {
    "type": "function",
    "description": "Yükleniyor durumundan sonuca geçen tek toast."
  }
}} />