---
title: "Badge"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Badge with solid, soft, outline, and ghost styles. Multiple sizes and semantic color variants for labels, statuses, and notification counts."
url: https://frutjam.com/tr/components/badge
---

# Badge Component

 Rozet bileşenleri, durum bilgilerini vurgulamak, kategorilere ayırmak veya görüntülemek için kullanılan küçük, kompakt etiketlerdir. Semantik HTML ve Tailwind CSS ile oluşturulan rozetler, tablolara, kartlara, kullanıcı profillerine ve bildirim sistemlerine esnek entegrasyon için birden fazla boyutu, rengi ve stili destekler. Hafif ve erişilebilir rozetler, görsel karmaşa yaratmadan bilgi hiyerarşisini geliştirir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf           | Tip   | Tanım                                                   |
| --------------- | ----- | ------------------------------------------------------- |
| badge           | Temel | Küçük satır içi etiket                                  |
| badge-outline   | Stil  | Renkli kenarlıklı şeffaf dolgu                          |
| badge-soft      | Stil  | Sessiz renkli arka plan                                 |
| badge-ghost     | Stil  | Kenarlıksız ince arka plan                              |
| badge-dashed    | Stil  | Kesikli kenarlık stili                                  |
| badge-pill      | Stil  | Tamamen yuvarlak hap şekli                              |
| badge-rounded   | Stil  | Orta yuvarlama                                          |
| badge-circle    | Stil  | Tek karakterler veya sayılar için eşit genişlikte daire |
| badge-square    | Stil  | Yuvarlaması olmayan kare                                |
| badge-xs        | Boyut | Ekstra küçük                                            |
| badge-sm        | Boyut | Küçük                                                   |
| badge-md        | Boyut | Orta (varsayılan)                                       |
| badge-lg        | Boyut | Büyük                                                   |
| badge-xl        | Boyut | Ekstra büyük                                            |
| badge-2xl       | Boyut | 2× ekstra büyük                                         |
| badge-primary   | Renk  | Birincil tema rengi                                     |
| badge-secondary | Renk  | İkincil tema rengi                                      |
| badge-accent    | Renk  | Vurgu teması rengi                                      |
| badge-neutral   | Renk  | Nötr tema rengi                                         |
| badge-info      | Renk  | Bilgi anlamsal rengi                                    |
| badge-success   | Renk  | Başarı anlamsal rengi                                   |
| badge-warning   | Renk  | Uyarı anlamsal rengi                                    |
| badge-error     | Renk  | Hata anlamsal rengi                                     |

## Temel Kullanım

## Rozet Boyutları

```html
<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>
```

## Rozet Renkleri

```html
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>
```

## Rozet Stilleri

### Yumuşak Rozetler

```html
<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>
```

### Taslak Rozetleri

```html
<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>
```

### Kesikli Rozetler

```html
<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>
```

### Hayalet Rozetleri

```html
<span class="badge badge-ghost">Ghost</span>
```

## Rozet Şekilleri

### Yuvarlak Rozet

```html
<span class="badge badge-error badge-rounded">10</span>
```

### Hap Rozeti

```html
<span class="badge badge-warning badge-pill">Pill badge</span>
```

### Kare Rozet

```html
<span class="badge badge-neutral badge-square">99+</span>
```

### Daire Rozeti

```html
<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>
```

## Rozet Göstergeleri

Boş rozetler durum göstergeleri veya bildirim noktaları için mükemmeldir.

```html
<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>
```

## Rozet Kompozisyonu

Rozetleri simgelerle entegre edin veya bunları düğmeler gibi diğer bileşenlerin içine yerleştirin.

### Simgeli Rozet

```html
<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>
```

### Rozet İçi Düğmesi

```html
<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>
```