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

# Status Component

Komponenty stanu wyświetlają bieżący stan lub dostępność użytkowników, systemów lub procesów za pomocą wskaźników wizualnych. Zbudowane w oparciu o semantyczny kod HTML i stylizację oznaczoną kolorami, plakietki stanu przekazują ważne informacje o stanie. System statusu Frutjam obsługuje wiele kolorów i rozmiarów — idealnie sprawdza się w przypadku obecności użytkownika, stanu systemu i stanów przepływu pracy.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa            | Typ     | Opis                                     |
| ---------------- | ------- | ---------------------------------------- |
| status           | Opierać | Mała kropka wskazująca stan lub obecność |
| status-xs        | Rozmiar | Bardzo mały                              |
| status-sm        | Rozmiar | Mały                                     |
| status-md        | Rozmiar | Średni (domyślny)                        |
| status-lg        | Rozmiar | Duży                                     |
| status-xl        | Rozmiar | Bardzo duży                              |
| status-primary   | Kolor   | Podstawowy kolor motywu                  |
| status-secondary | Kolor   | Kolor motywu drugorzędnego               |
| status-accent    | Kolor   | Kolor motywu akcentującego               |
| status-neutral   | Kolor   | Neutralny kolor motywu                   |
| status-info      | Kolor   | Kolor semantyczny informacji             |
| status-success   | Kolor   | Sukces semantyczny kolor                 |
| status-warning   | Kolor   | Ostrzeżenie kolor semantyczny            |
| status-error     | Kolor   | Błąd koloru semantycznego                |

## Podstawowe użycie

## Kolory stanu

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

## Rozmiary stanu

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

## Stan z etykietą

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

## Stan z animacją pingowania

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

## Stan z animacją odbijania

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

## Stan na liście użytkowników

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