---
title: "Badge"
description: "Durum etiketleri. Anlam için status değerleri, kategoriler için palet renkleri, ağırlık için üç varyant."
---

<Callout type="info" title="Ne zaman kullanılır">
Sipariş, ödeme, senkronizasyon ve plan durumları. Canlı durumlar için dot ekleyin.
</Callout>

## Kurulum

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

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`: neutral, info, success, warning, danger. Durumları renkle değil status ile verin; böylece her uygulamada aynı okunurlar.

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

```tsx
import { Badge } from "@/components/ui/badge"

export default function BadgeStatuses() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Taslak</Badge>
      <Badge status="info">Zamanlandı</Badge>
      <Badge status="success">Aktif</Badge>
      <Badge status="warning">İnceleme bekliyor</Badge>
      <Badge status="danger">Başarısız</Badge>
    </div>
  )
}
```

### Varyantlar

`variant`: listeler için soft, mutlaka öne çıkması gereken tek durum için solid, yoğun tablolar için surface. Anlamı `status`, ağırlığı `variant` verir; ikisi her kombinasyonda çalışır.

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

```tsx
import { Badge } from "@/components/ui/badge"

const statuses = ["neutral", "info", "success", "warning", "danger"] as const
const variants = ["soft", "solid", "surface"] as const

export default function BadgeVariants() {
  return (
    <div className="grid grid-cols-[auto_repeat(5,auto)] items-center gap-x-4 gap-y-3">
      {variants.map((variant) => (
        <div key={variant} className="contents">
          <span className="pr-2 font-mono text-[11px] text-muted-foreground">{variant}</span>
          {statuses.map((status) => (
            <Badge key={status} status={status} variant={variant}>
              {status}
            </Badge>
          ))}
        </div>
      ))}
    </div>
  )
}
```

### Renkler

Etiketler veya kanallar gibi anlam taşımayan kategoriler için.

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

```tsx
import { Badge } from "@/components/ui/badge"

const colors = ["neutral", "blue", "violet", "green", "lime", "amber", "red"] as const

export default function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {colors.map((color) => (
        <Badge key={color} color={color}>
          {color}
        </Badge>
      ))}
    </div>
  )
}
```

### Durumları eşleme

Sipariş durumlarını (Onaylandı, Hazırlanıyor, Kargoda…) ve pazaryeri iletimini status değerlerine bir kez eşleyin, eşlemeyi her ekranda tekrar kullanın.

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

```tsx
import { Badge } from "@/components/ui/badge"
import { channelSyncBadge, orderStatusBadge } from "@/demos/_data"

export default function BadgeOrderStatuses() {
  return (
    <div className="grid gap-3">
      <div className="flex flex-wrap gap-2">
        {Object.values(orderStatusBadge).map((badge) => (
          <Badge key={badge.label} status={badge.status} dot>
            {badge.label}
          </Badge>
        ))}
      </div>
      <div className="flex flex-wrap gap-2">
        {Object.values(channelSyncBadge).map((badge) => (
          <Badge key={badge.label} variant="surface" status={badge.status}>
            {badge.label}
          </Badge>
        ))}
      </div>
    </div>
  )
}
```

## API

### `Badge`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `variant` | `"soft" \| "solid" \| "surface"` | `"soft"` | Görsel ağırlık. surface her zaman dot gösterir. |
| `color` | `keyof typeof colors` | `"neutral"` | Palet rengi. status'u geçersiz kılar. |
| `size` | `"sm" \| "default"` | `"default"` | Yoğun tablolar için sm. |
| `asChild` | `boolean` | `false` |  |
| `status` | `BadgeStatus` | `"neutral"` | Durumun anlamı: neutral, info, success, warning, danger. |
| `dot` | `boolean` | `false` | Baştaki durum noktası. Solid renk ile tonlu metin arasında bir tondur; amber de beyaz üzerinde 3:1 kalır. |