Contenu et chargement du Badge
Badge accepte du contenu placé de chaque côté de son libellé ainsi qu'un état de chargement accessible.
tsx
<Badge left={<StatusDot />} right="12" tone="primary">
Notifications
</Badge>
<Badge
loading
loadingLabel="Synchronisation en cours"
spinnerProps={{ variant: "dots" }}
tone="warning"
>
Synchronisation
</Badge>Props
| Prop | Type | Rôle |
|---|---|---|
left | ReactNode | Contenu avant le libellé |
right | ReactNode | Contenu après le libellé |
loading | boolean | Active le spinner et aria-busy |
loadingLabel | string | Libellé accessible du spinner |
spinnerProps | Omit<SpinnerProps, "label"> | Personnalise le spinner |
Quand loading est actif, le spinner remplace left, mais le libellé et right restent visibles afin de conserver le contexte et la largeur du badge.