Composant · Données

Badge

Stable

Puce compacte pour les labels de statut, de catégorie ou d’état produit.

Quand l'utiliser

Étiqueter un statut, une catégorie ou un état (ex. « Stable », « Pending »).
Badge est non interactif. Pour un chip fermable ou cliquable, utilisez Tag.
Choisissez la tonalité selon le sens, pas une hiérarchie métier.

Exemples

Tonalités

NeutralSuccessWarningErrorInfo

Voir le code (Svelte)

<Badge>Neutral</Badge>
<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="error">Error</Badge>
<Badge tone="info">Info</Badge>

Usage en contexte

Export terminé : Completed•Validation requise : Pending

Voir le code (Svelte)

<span>Export terminé : </span>
<Badge tone="success">Completed</Badge>
<span>•</span>
<span>Validation requise : </span>
<Badge tone="warning">Pending</Badge>

API

Prop	Type	Default
`tone`	`"neutral" \| "success" \| "warning" \| "error" \| "info"`	`"neutral"`
`class`	`string`	optionnel
`children`	`Snippet`	contenu
`...props`	`HTMLAttributes<HTMLSpanElement>`	transmis

Le composant rend un <span> en mode inline avec classes d’état pré-définies. Il ne fournit ni interaction ni logique métier : utilisez-le comme label visuel.

Accessibilité

Le composant rend un <span> inline : le texte est lu tel quel.
La couleur n'est jamais le seul indice : le libellé porte le sens.
Si le badge est purement décoratif à côté d'un texte explicite, ajoutez aria-hidden.

Notes d’usage

À faire

Un libellé court, un ou deux mots.
Une tonalité cohérente entre badges de même nature.

À éviter

Y câbler une action : utilisez Tag ou un bouton.
Des phrases entières dans un badge.

Tokens utilisés

--st-semantic-surface-subtle
--st-semantic-text-secondary
--st-semantic-feedback-success
--st-semantic-feedback-warning
--st-semantic-feedback-error
--st-semantic-feedback-info
--st-radius-pill