TrendBadge
Badge affichant une variation signée et colorée. Utilisé partout où une évolution temporelle est montrée (KPI, Account, Analytics).
Source : src/components/ui/trend-badge.tsx
Props
Source : src/components/ui/trend-badge.tsx
| Prop | Type | Requis | Défaut | Description |
|---|---|---|---|---|
value | number | ✓ | — | — |
suffix | string | — | % | — |
size | enum | — | md | — |
Exemples
<TrendBadge value={3.2} /> {/* +3,2 % en vert */}
<TrendBadge value={-1.5} /> {/* −1,5 % en rouge */}
<TrendBadge value={0} /> {/* 0 % en neutre */}
<TrendBadge value={1250} suffix=" €" size="lg" />
Règles visuelles
| Valeur | Signe | Icône | Couleur |
|---|---|---|---|
> 0 | + | TrendingUp | var(--color-positive) |
< 0 | − (U+2212) | TrendingDown | var(--color-negative) |
= 0 | aucun | Minus | neutre muted |
Accessibilité
- Le signe est textuel en plus de la couleur (WCAG 1.4.1 — l'information ne passe pas uniquement par la couleur)
- Icône en
aria-hidden="true"— le signe + la valeur portent la sémantique tabular-numssur la valeur pour alignement vertical dans une liste
À ne pas faire
- Version « sans signe, juste couleur » (inaccessible aux daltoniens)
- Utiliser pour une valeur absolue (une somme, un solde) — réservé aux variations