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

# Indicator Component

 Indicator components display status, badges, or notifications positioned on other elements. Built with absolute positioning and flexible styling, indicators overlay important information on cards, avatars, and buttons. The Frutjam indicator system supports multiple placements, sizes, and colors—ideal for notification badges, status markers, and visual cues.

| Class            | Type     | Description                                        |
| ---------------- | -------- | -------------------------------------------------- |
| indicator        | Base     | Relative-positioned wrapper for the indicator item |
| indicator-item   | Modifier | Absolutely positioned badge or dot element         |
| indicator-top    | Modifier | Positions item at the top edge                     |
| indicator-middle | Modifier | Positions item at the vertical middle              |
| indicator-bottom | Modifier | Positions item at the bottom edge                  |
| indicator-start  | Modifier | Positions item at the left edge                    |
| indicator-center | Modifier | Positions item at the horizontal center            |
| indicator-end    | Modifier | Positions item at the right edge                   |

## Basic Usage

## Indicator Placements

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


## Indicator in Tabs

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


## Indicator on Input

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


## Indicator on Image

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


## Indicator on Cards

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


## Indicator on Avatar

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


## Responsive Behavior

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