StatusBadgeV2

BetaRSC-safe

Badge d'état pill V2 — 6 variantes : ok / warning / error / success / pending / neutral. Point indicateur optionnel (showDot). live=true ajoute aria-live=polite. CSS Modules, RSC-safe. Remplace progressivement StatusBadge (strangler fig).

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

Playground

6 variantes — sans point

CouvertProche limiteDépasséObjectif atteintEn attentePassé

Avec point indicateur (showDot)

CELI actifREER — 3 moisSur-cotisationFHSA — plafond atteintCalcul en coursÉchéance passée

Live (aria-live="polite") — mise à jour dynamique

Sync à jourSync en cours

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

<StatusBadgeV2 variant="ok"      label="CELI actif" />
<StatusBadgeV2 variant="warning" label="REER — 3 mois" showDot />
<StatusBadgeV2 variant="error"   label="Sur-cotisation" showDot />
<StatusBadgeV2 variant="success" label="Objectif atteint" />
<StatusBadgeV2 variant="pending" label="Calcul en cours" live showDot />
<StatusBadgeV2 variant="neutral" label="Passé" />

Documentation

ok
Couvert
warning
Proche limite
error
Dépassé
success
Objectif atteint
pending
En attente
neutral
Passé

variant, label, showDot, live, className

<StatusBadgeV2 variant="ok"      label="CELI actif" />
<StatusBadgeV2 variant="warning" label="REER — 3 mois" showDot />
<StatusBadgeV2 variant="error"   label="Sur-cotisation" showDot />
<StatusBadgeV2 variant="success" label="Objectif atteint" />
<StatusBadgeV2 variant="pending" label="Calcul en cours" live showDot />
<StatusBadgeV2 variant="neutral" label="Passé" />