---
title: "Indicator"
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 Indicator for notification badges and status overlays. Nine placement positions for avatars, buttons, and cards—no JavaScript required."
url: https://frutjam.com/tr/components/indicator
---

# Indicator Component

Gösterge bileşenleri, diğer öğelerin üzerinde konumlanan durumu, rozetleri veya bildirimleri görüntüler. Mutlak konumlandırma ve esnek stil ile oluşturulan göstergeler, kartlar, avatarlar ve düğmeler üzerindeki önemli bilgileri üst üste getirir. Frutjam gösterge sistemi birden fazla yerleşimi, boyutu ve rengi destekler; bildirim rozetleri, durum işaretleri ve görsel ipuçları 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                                                     |
| ---------------- | ----------- | --------------------------------------------------------- |
| indicator        | Temel       | Gösterge öğesi için göreceli konumlandırılmış sarmalayıcı |
| indicator-item   | Değiştirici | Kesinlikle konumlandırılmış rozet veya nokta öğesi        |
| indicator-top    | Değiştirici | Öğeyi üst kenarda konumlandırır                           |
| indicator-middle | Değiştirici | Öğeyi dikey olarak ortaya konumlandırır                   |
| indicator-bottom | Değiştirici | Öğeyi alt kenarda konumlandırır                           |
| indicator-start  | Değiştirici | Öğeyi sol kenarda konumlandırır                           |
| indicator-center | Değiştirici | Öğeyi yatay merkeze konumlandırır                         |
| indicator-end    | Değiştirici | Öğeyi sağ kenarda konumlandırır                           |

## Temel Kullanım

## Gösterge Yerleşimleri

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span>
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span>
  <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span>
  <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span>
  <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span>
  <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span>
  <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span>
  <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span>
  <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span>
  <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div>
</div>
```

## Sekmelerdeki Gösterge

```html
<div class="tabs tabs-lifted">
  <a class="tab">Messages</a>
  <a class="indicator tab tab-active">
    Notifications
    <span class="indicator-item badge">7</span>
  </a>
  <a class="tab">Requests</a>
</div>
```

## Giriş Göstergesi

```html
<div class="indicator">
  <span class="indicator-item badge badge-neutral badge-sm">Required</span>
  <input type="text" placeholder="Your email address" class="input" />
</div>
```

## Resimdeki Gösterge

```html
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-center badge">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src=""
  />
</div>
```

## Kartlardaki Gösterge

```html
<div class="indicator">
  <span class="indicator-item badge badge-success">New</span>
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Product Name</h2>
      <p>Product description and details go here.</p>
    </div>
  </div>
</div>
```

## Avatardaki Gösterge

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span>
  <div class="avatar">JS</div>
</div>
```

## Duyarlı Davranış

```html
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span>
  <button class="btn">Responsive</button>
</div>
```