---
title: "Status"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/fr/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.

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

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