---
title: "Status"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Status indicator for user presence and system health. Color-coded dots in multiple sizes for online, offline, busy, and away states."
url: https://frutjam.com/components/status
---

# Status Component

 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

## Status Colors

```html
<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
<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

```html
<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

```html
<div class="flex items-center gap-2">
  <div class="status status-info animate-bounce"></div>
  <span>Unread emails</span>
</div>
```


## Status in User List

```html
<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>
```