---
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/pl/components/indicator
---
# Indicator Component
Komponenty wskaźników wyświetlają status, plakietki lub powiadomienia umieszczone na innych elementach. Zbudowane z absolutnym pozycjonowaniem i elastyczną stylizacją, wskaźniki nakładają ważne informacje na karty, awatary i przyciski. System wskaźników Frutjam obsługuje wiele rozmieszczeń, rozmiarów i kolorów — idealnie nadaje się do plakietek powiadomień, znaczników stanu i wskazówek wizualnych.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
| ---------------- | ----------- | -------------------------------------------------- |
| indicator | Opierać | Opakowanie umieszczone względem elementu wskaźnika |
| indicator-item | Modyfikator | Absolutnie umieszczony element odznaki lub kropki |
| indicator-top | Modyfikator | Umieszcza element na górnej krawędzi |
| indicator-middle | Modyfikator | Umieszcza element na środku w pionie |
| indicator-bottom | Modyfikator | Umieszcza element na dolnej krawędzi |
| indicator-start | Modyfikator | Umieszcza element przy lewej krawędzi |
| indicator-center | Modyfikator | Umieszcza element w poziomym środku |
| indicator-end | Modyfikator | Umieszcza element przy prawej krawędzi |
## Podstawowe użycie
## Rozmieszczenie wskaźników
```html