---
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/fr/components/indicator
---
# Indicator Component
Les composants de l'indicateur affichent l'état, les badges ou les notifications positionnés sur d'autres éléments. Construits avec un positionnement absolu et un style flexible, les indicateurs superposent des informations importantes sur les cartes, les avatars et les boutons. Le système d'indicateurs Frutjam prend en charge plusieurs emplacements, tailles et couleurs, idéal pour les badges de notification, les marqueurs d'état et les repères visuels.
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 |
| ---------------- | ------------ | ---------------------------------------------------------- |
| indicator | Base | Wrapper à positionnement relatif pour l'élément indicateur |
| indicator-item | Modificateur | Badge ou élément de point absolument positionné |
| indicator-top | Modificateur | Positionne l'élément sur le bord supérieur |
| indicator-middle | Modificateur | Positionne l'élément au milieu vertical |
| indicator-bottom | Modificateur | Positionne l'élément sur le bord inférieur |
| indicator-start | Modificateur | Positionne l'élément sur le bord gauche |
| indicator-center | Modificateur | Positionne l'élément au centre horizontal |
| indicator-end | Modificateur | Positionne l'élément sur le bord droit |
## Utilisation de base
## Emplacements des indicateurs
```html