---
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/zh-hant/components/status
---

# Status Component

狀態組件透過視覺指示器顯示使用者、系統或行程的目前狀態或可用性。狀態徽章採用語意 HTML 和顏色編碼樣式構建，可傳達重要的狀態訊息。 Frutjam 狀態系統支援多種顏色和尺寸，非常適合使用者狀態、系統運作狀況和工作流程狀態。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級               | 類型 | 描述            |
| ---------------- | --- | ------------- |
| status           | 根據 | 用於狀態或存在的小點指示器 |
| status-xs        | 尺寸 | 特小號           |
| status-sm        | 尺寸 | 小的            |
| status-md        | 尺寸 | 中（預設）         |
| status-lg        | 尺寸 | 大的            |
| status-xl        | 尺寸 | 特大號           |
| status-primary   | 顏色 | 主要主題顏色        |
| status-secondary | 顏色 | 次要主題色         |
| status-accent    | 顏色 | 強調主題顏色        |
| status-neutral   | 顏色 | 中性主題色         |
| status-info      | 顏色 | 訊息語意顏色        |
| status-success   | 顏色 | 成功語意色         |
| status-warning   | 顏色 | 警告語意顏色        |
| status-error     | 顏色 | 錯誤語意顏色        |

## 基本用法

## 狀態顏色

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

## 狀態尺寸

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

## 帶標籤的狀態

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

## 帶有 Ping 動畫的狀態

```html
<div class="status status-error animate-ping"></div>
```

## 帶有彈跳動畫的狀態

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

## 使用者清單中的狀態

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