---
title: "Indicator"
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 Indicator for notification badges and status overlays. Nine placement positions for avatars, buttons, and cards—no JavaScript required."
url: https://frutjam.com/zh-hant/components/indicator
---

# Indicator Component

指示器組件顯示位於其他元素上的狀態、徽章或通知。指示器採用絕對定位和靈活的樣式構建，可覆蓋卡片、頭像和按鈕上的重要資訊。 Frutjam 指示器系統支援多種位置、尺寸和顏色，非常適合通知徽章、狀態標記和視覺提示。

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

| 班級               | 類型  | 描述          |
| ---------------- | --- | ----------- |
| indicator        | 根據  | 指標項的相對定位包裝  |
| indicator-item   | 修飾符 | 絕對定位的徽章或點元素 |
| indicator-top    | 修飾符 | 將項目放置在頂部邊緣  |
| indicator-middle | 修飾符 | 將項目定位在垂直中間  |
| indicator-bottom | 修飾符 | 將項目放置在底部邊緣  |
| indicator-start  | 修飾符 | 將項目定位在左邊緣   |
| indicator-center | 修飾符 | 將項目放置在水平中心  |
| indicator-end    | 修飾符 | 將物品放置在右邊緣   |

## 基本用法

## 指標放置

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span>
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span>
  <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span>
  <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span>
  <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span>
  <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span>
  <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span>
  <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span>
  <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span>
  <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div>
</div>
```

## 選項卡中的指示器

```html
<div class="tabs tabs-lifted">
  <a class="tab">Messages</a>
  <a class="indicator tab tab-active">
    Notifications
    <span class="indicator-item badge">7</span>
  </a>
  <a class="tab">Requests</a>
</div>
```

## 輸入指示燈

```html
<div class="indicator">
  <span class="indicator-item badge badge-neutral badge-sm">Required</span>
  <input type="text" placeholder="Your email address" class="input" />
</div>
```

## 影像上的指示器

```html
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-center badge">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src=""
  />
</div>
```

## 卡片上的指示器

```html
<div class="indicator">
  <span class="indicator-item badge badge-success">New</span>
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Product Name</h2>
      <p>Product description and details go here.</p>
    </div>
  </div>
</div>
```

## 頭像上的指示器

```html
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span>
  <div class="avatar">JS</div>
</div>
```

## 回應行為

```html
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span>
  <button class="btn">Responsive</button>
</div>
```