StatusBadge

StableRSC-safe

Badge d'état pill — couleur + TEXTE (jamais couleur seule, WCAG 1.4.1). Variants ok / warning / error / success.

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

Playground

CouvertProche limiteDépasséObjectif atteint

Avec valeur78 %89 %112 %100 %

ContexteCELI actifREER — 3 mois restantsSur-cotisationFHSA — plafond atteint

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

<StatusBadge variant="ok" label="CELI actif" />
<StatusBadge variant="warning" label="REER — 3 mois restants" />
<StatusBadge variant="error" label="Sur-cotisation" />

Documentation

ok
Couvert
warning
Proche limite
error
Dépassé
success
Objectif atteint

variant, label, live

<StatusBadge variant="ok" label="CELI actif" />
<StatusBadge variant="warning" label="REER — 3 mois restants" />
<StatusBadge variant="error" label="Sur-cotisation" />