Indikator titik status Tailwind CSS khusus CSS dengan varian warna utama, sukses, peringatan, dan kesalahan. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
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
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
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
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
<div class="status status-error animate-ping"></div> |
Status dengan Animasi Bouncing
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
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Status yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.