Badge

Une étiquette d'état, courte et dense.

Elle porte un ton, jamais une action : un badge cliquable se confond avec un bouton petit, et l'on découvre qu'il ne l'était pas en cliquant. Ce qui agit est un bouton.

Installation

sia-ui add badge

Ou par le paquet, sans rien copier :

import { Badge, toneOf, StatusBadge } from "@sia-ui/react-web";

Props de Badge

Prop	Type	Défaut	Description
left	ReactNode	—
loading	boolean	false
loadingLabel	string	—
right	ReactNode	—
spinnerProps	Omit<SpinnerProps, "label">	—
tone	ComponentTone	—
variant	"soft" | "solid" | "outline"	—

Props de StatusBadge

Une valeur rendue en pastille, ton et libellé tirés de deux tables.

Déclarées une fois par domaine — les statuts de facture, les actions du journal — puis passées partout où la valeur s'affiche : colonne libre, détail, carte. Une valeur inconnue garde une pastille neutre plutôt que de disparaître.

Prop	Type	Défaut	Description
* value	string | number	—	La valeur brute : "payee", "prod", "delete".
empty	ReactNode	null	Ce qui s'affiche sans valeur. Rien par défaut.
fallbackTone	ComponentTone	neutral	Le ton d'une valeur absente de tones. neutral par défaut.
labels	Readonly<Record<string, ReactNode>>	—	Le libellé de chaque valeur. À défaut, la valeur elle-même.
left	ReactNode	—
loading	boolean	—
loadingLabel	string	—
right	ReactNode	—
spinnerProps	Omit<SpinnerProps, "label">	—
tones	Readonly<Record<string, ComponentTone>>	—	Le ton de chaque valeur.
variant	"soft" | "solid" | "outline"	—

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.