---
title: "Status"
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 Status indicator for user presence and system health. Color-coded dots in multiple sizes for online, offline, busy, and away states."
url: https://frutjam.com/tr/components/status
---

# Status Component

Durum bileşenleri, görsel göstergeler aracılığıyla kullanıcıların, sistemlerin veya süreçlerin mevcut durumunu veya kullanılabilirliğini görüntüler. Anlamsal HTML ve renk kodlu stil ile oluşturulan durum rozetleri, önemli durum bilgilerini iletir. Frutjam durum sistemi birden fazla renk ve boyutu destekler; kullanıcı varlığı, sistem durumu ve iş akışı durumları 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                                             |
| ---------------- | ----- | ------------------------------------------------- |
| status           | Temel | Durum veya mevcudiyet için küçük nokta göstergesi |
| status-xs        | Boyut | Ekstra küçük                                      |
| status-sm        | Boyut | Küçük                                             |
| status-md        | Boyut | Orta (varsayılan)                                 |
| status-lg        | Boyut | Büyük                                             |
| status-xl        | Boyut | Ekstra büyük                                      |
| status-primary   | Renk  | Birincil tema rengi                               |
| status-secondary | Renk  | İkincil tema rengi                                |
| status-accent    | Renk  | Vurgu teması rengi                                |
| status-neutral   | Renk  | Nötr tema rengi                                   |
| status-info      | Renk  | Bilgi anlamsal rengi                              |
| status-success   | Renk  | Başarı anlamsal rengi                             |
| status-warning   | Renk  | Uyarı anlamsal rengi                              |
| status-error     | Renk  | Hata anlamsal rengi                               |

## Temel Kullanım

## Durum Renkleri

```html
<span class="status status-primary"></span>
<span class="status status-secondary"></span>
<span class="status status-accent"></span>
<span class="status status-neutral"></span>
<span class="status status-info"></span>
<span class="status status-success"></span>
<span class="status status-warning"></span>
<span class="status status-error"></span>
```

## Durum Boyutları

```html
<span class="status status-xs status-success"></span>
<span class="status status-sm status-success"></span>
<span class="status status-md status-success"></span>
<span class="status status-lg status-success"></span>
```

## Etiketli Durum

```html
<div class="flex items-center gap-2">
  <span class="status status-md status-success"></span>
  <span>Online</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-neutral"></span>
  <span>Offline</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-error"></span>
  <span>Busy</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-warning"></span>
  <span>Away</span>
</div>
```

## Ping Animasyonlu Durum

```html
<div class="status status-error animate-ping"></div>
```

## Sıçrama Animasyonlu Durum

```html
<div class="flex items-center gap-2">
  <div class="status status-info animate-bounce"></div>
  <span>Unread emails</span>
</div>
```

## Kullanıcı Listesindeki Durum

```html
<div class="space-y-2">
  <div class="flex items-center gap-2">
    <div class="avatar avatar-online">
      U1
    </div>
    <span>John (Online)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-offline">
      U2
    </div>
    <span>Jane (Offline)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-busy">
      U3
    </div>
    <span>Bob (Busy)</span>
  </div>
</div>
```