Status Component
A compact status indicator component built with Tailwind CSS for communicating user presence, system health, and workflow states. Display online, offline, busy, and away states with color-coded dots. Supports multiple sizes and label pairings for real-time status communication.
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.
| 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> |