---
title: "Empty State"
description: "Bir görünümün neden boş olduğunu açıklar ve sonraki adımı sunar."
---

<Callout type="info" title="Ne zaman kullanılır">
Bir özelliğin ilk kullanımı (size="page"), sonuç vermeyen filtreli tablolar ("section"), küçük paneller ("inline"). Bir bölüm yüklenemediyse status="danger" ile aynı yerde hatayı ve tekrar deneme yolunu gösterin.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/empty-state
```

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

## Örnekler

### İlk kullanım

Birincil aksiyon, bir alternatif ve dokümantasyon bağlantısı.

**Örnek: İlk kullanım** (`empty-state/page`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/empty-state/page)

```tsx
import { MegaphoneIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/ikas/empty-state"

export default function EmptyStatePage() {
  return (
    <EmptyState
      size="page"
      media={<MegaphoneIcon />}
      title="İlk kampanyanızı oluşturun"
      description="Kampanyalar, kod gerektirmeden ödeme adımında indirimi otomatik uygular."
      actions={
        <>
          <Button>
            <PlusIcon data-icon="inline-start" />
            Kampanya oluştur
          </Button>
          <Button variant="outline">CSV’den içe aktar</Button>
        </>
      }
      footer={
        <>
          Yardım mı lazım? <a href="#">Kampanya rehberini okuyun</a>
        </>
      }
    />
  )
}
```

### Sonuç yok

Kart veya tablo içinde. Filtreden çıkış yolu sunun.

**Örnek: Sonuç yok** (`empty-state/section`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/empty-state/section)

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

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { EmptyState } from "@/components/ikas/empty-state"

export default function EmptyStateSection() {
  return (
    <Card className="w-full max-w-lg py-0">
      <EmptyState
        media={<SearchXIcon />}
        title="Bu filtrelere uyan sipariş yok"
        description="Farklı bir tarih aralığı deneyin ya da ödeme filtresini temizleyin."
        actions={<Button variant="outline">Filtreleri temizle</Button>}
      />
    </Card>
  )
}
```

### Yüklenemedi

`status="danger"` ikon kutusunu durum rengiyle boyar (ikon verilmezse uyarı ikonu gelir) ve mesajı `role="alert"` ile duyurur. `onRetry` başa bir "Tekrar dene" butonu ekler; istek sürerken `retrying` verin. Önce neyin yüklenmediğini, sonra çözümü yazın; hata kodu gerekiyorsa footer'da mono yazıyla verin.

**Örnek: Yüklenemedi** (`empty-state/error`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/empty-state/error)

```tsx
import * as React from "react"

import { Card } from "@/components/ui/card"
import { EmptyState } from "@/components/ikas/empty-state"

/** status="danger": the section could not load. Say what failed, then offer a retry. */
export default function EmptyStateError() {
  const [retrying, setRetrying] = React.useState(false)

  return (
    <Card className="w-full max-w-lg py-0">
      <EmptyState
        status="danger"
        title="Kampanyalar yüklenemedi"
        description="Sunucuya ulaşılamadı. Kampanyalarınız etkilenmedi; birazdan tekrar deneyin."
        onRetry={() => {
          setRetrying(true)
          setTimeout(() => setRetrying(false), 1500)
        }}
        retrying={retrying}
        footer={<span className="font-mono">Hata kodu: CMP-503</span>}
      />
    </Card>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Başlığı sonraki adım olarak yazın: “İlk kampanyanızı oluşturun”.
- Hata başlığında neyin yüklenmediğini söyleyin: “Kampanyalar yüklenemedi”.

**Yapmayın:**

- Şaka, “Hay aksi!”, emoji veya büyük illüstrasyon yok.
- Tablo gövdesini boş bırakmayın.
- Ham hata nesnesi veya stack trace göstermeyin.

## API

### `EmptyState`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `size` | `"page" \| "section" \| "inline"` | `"section"` | Boşluğu, ikonu ve başlığı ölçekler. |
| `media` | `React.ReactNode` | - | Bir lucide ikonu. Soluk bir kutu içinde gösterilir; danger'da durum tonlu kutuda. |
| `title` (zorunlu) | `React.ReactNode` | - | Eksik olan şey; bir ifade veya sonraki adım olarak. |
| `description` | `React.ReactNode` | - | Neden önemli olduğu veya nasıl doldurulacağı. |
| `actions` | `React.ReactNode` | - | Birincil aksiyon önce. |
| `footer` | `React.ReactNode` | - | Küçük not, örn. yardım bağlantısı veya hata kodu. |
| `status` | `"neutral" \| "danger"` | `"neutral"` | danger: görünüm yüklenemedi. İkon kutusu danger tonunu alır, ikon verilmezse uyarı ikonu gelir, role="alert". |
| `onRetry` | `() => void` | - | Aksiyonların başına "Tekrar dene" butonu ekler. |
| `retryLabel` | `string` | `"Tekrar dene"` | Tekrar dene butonunun metni. |
| `retrying` | `boolean` | `false` | İstek sürerken tekrar dene butonunda spinner gösterir. |