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-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | Type | Description |
|---|---|---|
| status | Base | Small dot indicator for state or presence |
| status-xs | Size | Extra small |
| status-sm | Size | Small |
| status-md | Size | Medium (default) |
| status-lg | Size | Large |
| status-xl | Size | Extra large |
| status-primary | Color | Primary theme color |
| status-secondary | Color | Secondary theme color |
| status-accent | Color | Accent theme color |
| status-neutral | Color | Neutral theme color |
| status-info | Color | Info semantic color |
| status-success | Color | Success semantic color |
| status-warning | Color | Warning semantic color |
| status-error | Color | Error semantic color |
Basic Usage
<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> |