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.
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
<span class="status"></span> |
<span className="status"></span> |
Warna Status
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> |
Ukuran Status
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> |
Status dengan Label
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> |
Status dengan Animasi Ping
html
<div class="status status-error animate-ping"></div> |
Status dengan Animasi Bouncing
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> |
Status dalam Daftar Pengguna
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> |