Status Component
CSS-only Tailwind CSS status dot indicator with primary, success, warning, and error color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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
<span class="status"></span> |
<span className="status"></span> |
Kolory stanu
html
1 2 3 4 5 6 7 8 | <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
1 2 3 4 | <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ą
Online
Offline
Busy
Away
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
Unread emails
html
1 2 3 4 | <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
U1
John (Online)
U2
Jane (Offline)
U3
Bob (Busy)
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |