---
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/id/components/status
---

# Status Component

Komponen status menampilkan keadaan saat ini atau ketersediaan pengguna, sistem, atau proses melalui indikator visual. Dibangun dengan HTML semantik dan gaya kode warna, lencana status mengkomunikasikan informasi penting negara. Sistem status Frutjam mendukung berbagai warna dan ukuran—ideal untuk keberadaan pengguna, kesehatan sistem, dan status alur kerja.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas            | Jenis  | Keterangan                                         |
| ---------------- | ------ | -------------------------------------------------- |
| status           | Basis  | Indikator titik kecil untuk status atau keberadaan |
| status-xs        | Ukuran | Sangat kecil                                       |
| status-sm        | Ukuran | Kecil                                              |
| status-md        | Ukuran | Sedang (standar)                                   |
| status-lg        | Ukuran | Besar                                              |
| status-xl        | Ukuran | Ekstra besar                                       |
| status-primary   | Warna  | Warna tema utama                                   |
| status-secondary | Warna  | Warna tema sekunder                                |
| status-accent    | Warna  | Warna tema aksen                                   |
| status-neutral   | Warna  | Warna tema netral                                  |
| status-info      | Warna  | Info warna semantik                                |
| status-success   | Warna  | Warna semantik sukses                              |
| status-warning   | Warna  | Warna semantik peringatan                          |
| status-error     | Warna  | Kesalahan warna semantik                           |

## Penggunaan Dasar

## Warna Status

```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>
```

## Ukuran Status

```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>
```

## Status dengan Label

```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>
```

## Status dengan Animasi Ping

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

## Status dengan Animasi Bouncing

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

## Status dalam Daftar Pengguna

```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>
```