---
title: "Tag"
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 Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/tr/components/tag
---

# Tag Component

Etiket bileşenleri, içeriği kategorize etmek, filtrelemek veya etiketlemek için kullanılan küçük, etiketli bilgi parçalarını görüntüler. Anlamsal HTML ve esnek stil ile oluşturulan etiketler, kullanıcıların içerik türünü, durumunu veya kategorisini hızlı bir şekilde tanımlamasına yardımcı olur. Frutjam etiket sistemi birden fazla boyutu, rengi, stili ve şekli destekler; beceri listeleri, makale kategorileri, durum etiketleri ve içerik meta verileri için idealdir.

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                                                              |
| ------------- | ----------- | ------------------------------------------------------------------ |
| tag           | Temel       | İçeriği kategorilere ayırmak veya tanımlamak için satır içi etiket |
| tag-outline   | Stil        | Renkli kenarlıklı şeffaf dolgu                                     |
| tag-soft      | Stil        | Sessiz renkli arka plan                                            |
| tag-square    | Stil        | Hafif yuvarlama (varsayılan haptan daha az)                        |
| tag-remove    | Değiştirici | Etiketin içindeki reddet/kaldır düğmesi                            |
| tag-xs        | Boyut       | Ekstra küçük (0,6875rem yazı tipi)                                 |
| tag-sm        | Boyut       | Küçük (0,75rem yazı tipi)                                          |
| tag-md        | Boyut       | Orta (0,8125rem yazı tipi, varsayılan)                             |
| tag-lg        | Boyut       | Büyük (0,9375rem yazı tipi)                                        |
| tag-xl        | Boyut       | Ekstra büyük (1rem yazı tipi)                                      |
| tag-primary   | Renk        | Birincil tema rengi                                                |
| tag-secondary | Renk        | İkincil tema rengi                                                 |
| tag-accent    | Renk        | Vurgu teması rengi                                                 |
| tag-neutral   | Renk        | Nötr tema rengi                                                    |
| tag-info      | Renk        | Bilgi anlamsal rengi                                               |
| tag-success   | Renk        | Başarı anlamsal rengi                                              |
| tag-warning   | Renk        | Uyarı anlamsal rengi                                               |
| tag-error     | Renk        | Hata anlamsal rengi                                                |

## Temel Kullanım

## Etiket Boyutları

```html
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>
```

## Etiket Renkleri

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

## Etiket Stilleri

```html
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>
```

## Etiket Şekilleri

```html
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>
```

## Simgeli Etiket

```html
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>
```

## Kapatılabilir Etiketler

```html
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>
```

## Etiket Listesi

```html
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>
```