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.
Status components display the current state or availability of users, systems, or processes through visual indicators. Built with semantic HTML and color-coded styling, status badges communicate important state information. The Frutjam status system supports multiple colors and sizes—ideal for user presence, system health, and workflow states.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| status | Base | Small dot indicator for state or presence |
| status-xs | Taille | Très petit |
| status-sm | Taille | Petit |
| status-md | Taille | Moyen (par défaut) |
| status-lg | Taille | Grand |
| status-xl | Taille | Très grand |
| status-primary | Couleur | Couleur du thème principal |
| status-secondary | Couleur | Couleur du thème secondaire |
| status-accent | Couleur | Couleur du thème d'accentuation |
| status-neutral | Couleur | Couleur du thème neutre |
| status-info | Couleur | Couleur sémantique de l'information |
| status-success | Couleur | Couleur sémantique du succès |
| status-warning | Couleur | Couleur sémantique d’avertissement |
| status-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
<span class="status"></span> |
<span className="status"></span> |
Status Colors
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> |
Status Sizes
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 with 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 with Ping Animation
html
<div class="status status-error animate-ping"></div> |
Status with Bounce Animation
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 in User List
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> |