Composants
Badge
Une pilule qui porte un statut, pas une action. C'est pourquoi la prop s'appelle
tone et non variant : un badge décrit l'état
d'une donnée (payée, en retard, brouillon), il ne se clique pas.
import { Badge } from "@forme-ch/ui/controls";
<Badge tone="neutral" label="Neutre" />
<Badge tone="success" label="Payée" />
<Badge tone="warning" label="En attente" />
<Badge tone="danger" label="En retard" />
<Badge tone="info" label="Brouillon" />Avec icône
La prop icon précède le label — utile pour renforcer le sens d'un statut.
import { CheckIcon, ClockIcon, WarningIcon } from "@forme-ch/ui/icons";
<Badge tone="success" label="Payée" icon={<CheckIcon />} />
<Badge tone="warning" label="À valider" icon={<ClockIcon />} />
<Badge tone="danger" label="Bloquée" icon={<WarningIcon />} />Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
label * | ReactNode | — | Contenu affiché dans la pilule (texte de statut). |
tone | BadgeTone | "neutral" | neutral · success · warning · danger · info. danger est mappé sur error côté Astryx. |
icon | ReactNode | — | Icône optionnelle placée avant le label. |
className | string | — | Classe CSS additionnelle. |
style | CSSProperties | — | Styles inline. |
Accessibilité
Le badge est purement visuel : la couleur ne doit jamais être le seul porteur de sens.
Le label textuel (« En retard », « Payée ») reste lisible pour tous, y
compris en niveaux de gris ou sous lecteur d'écran. N'encode pas un statut par la seule teinte.
Do & Don't
✓ À faire
Choisir le tone selon le sens sémantique : success = validé, danger = problème. Garder un label court.
✕ À éviter
Détourner un badge en bouton. Multiplier les tons sur une même ligne au point de brouiller la hiérarchie.