KpiHero

BetaRSC-safe

Grand chiffre héro — gradient radial d'accent optionnel (maquette .fiscal-hero), tone neutral/positive/negative. data-testid transmis au nœud racine (garde-fou P0). Composant neuf, ne remplace PAS PatrimoineKPI. RSC-safe.

import { KpiHero } from "@lyra/tokens/components";

Playground

Patrimoine net

847 230 $

Mis à jour : 2026-06-29

Remboursement estimé

+1 247 $

Fédéral +812 $ · Québec +435 $

Dépassement budget

-312 $

Catégorie : Transport

Démo interactive — réglages du playground (props ajustables en direct) à venir.

<KpiHero
  label="Remboursement estimé"
  value="+1 247 $"
  sub="Fédéral +812 $ · Québec +435 $"
  tone="positive"
  accent
  data-testid="net-worth"
/>

Documentation

neutral
Patrimoine net
847 230 $
positive+accent
Remboursement
+1 247 $
negative
Dépassement
-312 $

label, value, sub, tone, accent, data-testid

<KpiHero
  label="Remboursement estimé"
  value="+1 247 $"
  sub="Fédéral +812 $ · Québec +435 $"
  tone="positive"
  accent
  data-testid="net-worth"
/>