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-nums sur 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

Voir aussi

• Financial display
• Colors