---
title: "Banner"
description: "Uygulamanın veya bir sayfanın durumu hakkında kalıcı, duruma göre renklenen mesaj."
---

<Callout type="info" title="Ne zaman kullanılır">
Mağaza sahibinin bilmesi veya düzeltmesi gereken ve o işlem yapana kadar geçerli kalan durumlar. Tek seferlik onaylar için toast kullanın.
</Callout>

## Kurulum

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

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

## Örnekler

### Durumlar

`status`: info, success, warning, danger. Renk süs değil, durumun kendisidir. Soft varyantta başlık, metin, bağlantılar ve ikon durumun tonunu alır; metin her iki temada da AA kontrastı korur.

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

```tsx
import { Banner } from "@/components/ikas/banner"

export default function BannerStatuses() {
  return (
    <div className="grid w-full max-w-xl gap-3">
      <Banner status="info" title="Yeni eşitleme altyapısı">
        Ürün eşitlemesi artık saatte bir yerine 15 dakikada bir çalışıyor.
      </Banner>
      <Banner status="success" title="Mağaza bağlandı">
        Ürünleriniz bir saat içinde pazaryerinde görünecek.
      </Banner>
      <Banner status="warning" title="12 ürünün barkodu eksik">
        Barkod eklenene kadar bu ürünler atlanacak.
      </Banner>
      <Banner status="danger" title="Eşitleme başarısız">
        Pazaryeri API anahtarını reddetti. Eşitlemeye devam etmek için <a href="#">ayarlardan</a> güncelleyin.
      </Banner>
    </div>
  )
}
```

### Surface

variant="surface": renkli ikonlu beyaz kart; metin ve butonlar nötr kalır, yalnızca ikon ve bağlantılar renk alır. Bir bölümün içindeki mesajlar için.

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

```tsx
import { Button } from "@/components/ui/button"
import { Banner } from "@/components/ikas/banner"

export default function BannerSurface() {
  return (
    <div className="grid w-full max-w-xl gap-3">
      <Banner variant="surface" status="info" title="Fiyatlar günde bir kez eşitlenir">
        ikas’ta yaptığınız değişiklikler pazaryerine gece ulaşır.
      </Banner>
      <Banner variant="surface" status="success" title="Webhook doğrulandı">
        Sipariş güncellemeleri anlık olarak iletilir.
      </Banner>
      <Banner
        variant="surface"
        status="warning"
        title="3 kategori eşleşmedi"
        actions={
          <Button size="sm" variant="outline">
            Kategorileri eşle
          </Button>
        }
      >
        Bu kategorilerdeki ürünler <a href="#">varsayılan kategoriye</a> gönderilir.
      </Banner>
    </div>
  )
}
```

### Aksiyonlar ve kapatma

`size="sm"` butonlar, `color` vermeden. Soft banner butonları durumun rengine boyar: solid durum dolgusunu, soft ve ghost daha belirgin bir tonu, outline durum kenarlıklı yarı saydam bir yüzeyi alır; kapatma butonu ve odak halkası da tonlanır. Bölüm başına en fazla bir solid buton. danger durumundaki banner'ları kapatılabilir yapmayın.

**Örnek: Aksiyonlar ve kapatma** (`banner/with-actions`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/banner/with-actions)

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

import { Button } from "@/components/ui/button"
import { Banner } from "@/components/ikas/banner"

export default function BannerWithActions() {
  const [visible, setVisible] = React.useState(true)

  if (!visible) {
    return (
      <Button variant="outline" onClick={() => setVisible(true)}>
        Banner’ı tekrar göster
      </Button>
    )
  }

  return (
    <div className="grid w-full max-w-xl gap-3">
      <Banner
        status="warning"
        title="Paketiniz 3 gün içinde yenilenecek"
        onDismiss={() => setVisible(false)}
        actions={
          <>
            <Button size="sm" variant="outline">
              Paketi yönet
            </Button>
            <Button size="sm" variant="ghost">
              Faturaları görüntüle
            </Button>
          </>
        }
      >
        Sonu 4242 ile biten karttan ₺499,00 tahsil edilecek.
      </Banner>
      <Banner
        status="danger"
        title="Eşitleme durdu"
        actions={
          <>
            <Button size="sm">Anahtarı güncelle</Button>
            <Button size="sm" variant="soft">
              Tekrar dene
            </Button>
          </>
        }
      >
        Pazaryeri API anahtarını reddetti. Son başarılı eşitleme 2 saat önce.
      </Banner>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Önce sonucu (ne gönderilmedi, ne durdu), sonra çözümü yazın.
- Sayfa düzeyindeki banner'ları PageHeader'ın hemen altına yerleştirin.

**Yapmayın:**

- İkiden fazla banner'ı üst üste koymayın.
- “Kaydedildi!” mesajları için banner kullanmayın; toast kullanın.

## API

### `Banner`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `status` | `keyof typeof statusTint` | `"info"` | Rengi, ikonu ve ARIA rolünü belirler (warning/danger için alert). |
| `variant` | `"soft" \| "surface"` | `"soft"` | Renkli dolgu veya beyaz kart. |
| `title` | `React.ReactNode` | - | Kısa özet. |
| `icon` | `React.ReactNode \| false` | - | Durum ikonunu değiştirir veya gizler. |
| `actions` | `React.ReactNode` | - | Metnin altındaki butonlar. size="sm" kullanın, color vermeyin; soft varyantta durumun rengini alırlar. |
| `onDismiss` | `() => void` | - | Kapatma butonu gösterir. |