Badge

Étiquette compacte non interactive pour afficher un statut, une catégorie ou un compteur. 6 variantes sémantiques, 2 tailles, icônes, mode icon-only accessible. Compact non-interactive label for displaying status, category, or count. 6 semantic variants, 2 sizes, icons, accessible icon-only mode.

VariantesVariants

neutral

NeutreNeutral

Neutre (sm)Neutral (sm)

brand

BetaBeta

Beta (sm)Beta (sm)

success

ActifActive

Actif (sm)Active (sm)

warning

En attentePending

En attente (sm)Pending (sm)

danger

RejetéRejected

Rejeté (sm)Rejected (sm)

info

En coursIn progress

En cours (sm)In progress (sm)

Règles absoluesAbsolute rules

Non interactif — pour une action, utiliser <agtc-button>Non-interactive — for an action, use <agtc-button>
icon-only exige label="…" — WCAG 1.1.1icon-only requires label="…" — WCAG 1.1.1
Choisir la variante par intention sémantique, pas par couleurChoose variant by semantic intent, not by color
Jamais de variante inventée hors de component.jsonNever an invented variant outside component.json
Jamais de couleur codée en durNever hardcoded color

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-badge-neutral-background`	`semantic.color.background.subtle`	#f0f0f0
`--agtc-component-badge-neutral-text`	`semantic.color.text.secondary`	#646464
`--agtc-component-badge-neutral-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-component-badge-brand-background`	`semantic.color.brand.primary-subtle`	#e0f8f3
`--agtc-component-badge-success-background`	`primitive.color.green.3`	—
`--agtc-component-badge-success-text`	`semantic.color.feedback.success`	#18794e
`--agtc-component-badge-warning-background`	`primitive.color.orange.3`	—
`--agtc-component-badge-danger-background`	`semantic.color.feedback.danger-subtle`	#feebec
`--agtc-component-badge-danger-text`	`semantic.color.feedback.danger`	#ce2c31
`--agtc-component-badge-info-background`	`primitive.color.blue.3`	—
`--agtc-component-badge-md-radius`	`—`	9999px
`--agtc-component-badge-md-font-size`	`semantic.typography.label.size`	0.875rem
`--agtc-component-badge-sm-font-size`	`semantic.typography.detail.size`	0.75rem

AccessibilitéAccessibility

role="status" — les changements de statut sont annoncés aux lecteurs d'écranrole="status" — status changes are announced to screen readers
Mode icon-only : aria-label obligatoireicon-only mode: aria-label required
Badge décoratif sans texte : aria-hidden="true"Decorative badge without text: aria-hidden="true"
Contraste 4.5:1 sur fond blanc vérifié pour toutes les variantes4.5:1 contrast on white background verified for all variants

ImplémentationImplementation

<!-- Variantes -->
<agtc-badge>NeutreNeutral</agtc-badge>
<agtc-badge variant="success">ActifActive</agtc-badge>
<agtc-badge variant="warning">En attentePending</agtc-badge>
<agtc-badge variant="danger">RejetéRejected</agtc-badge>
<agtc-badge variant="info">En coursIn progress</agtc-badge>
<agtc-badge variant="brand">Beta</agtc-badge>

<!-- Taille sm -->
<agtc-badge size="sm" variant="neutral">Draft</agtc-badge>

<!-- Avec icône -->
<agtc-badge variant="success" icon="check">ApprouvéApproved</agtc-badge>

<!-- Icon-only — label obligatoire -->
<agtc-badge icon-only icon="check" label="ApprouvéApproved" variant="success"></agtc-badge>

DOs et DON'TsDOs and DON'Ts

À faireDo

Choisir la variante par intention (success pour validé, danger pour erreur)Choose variant by intent (success for approved, danger for error)
Ajouter label sur icon-only pour les lecteurs d'écranAdd label on icon-only for screen readers
Utiliser size="sm" dans les tableaux et espaces densesUse size="sm" in tables and dense layouts

À éviterDon't

Badge cliquable sans encapsulation dans <button>Clickable badge without wrapping in <button>
icon-only sans label — inaccessibleicon-only without label — inaccessible
Variante choisie par couleur, pas par intentionVariant chosen by color, not by intent

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036). Decision: all approved.

Pattern	Source	Applied	Justification
Status not encoded by color alone	NN/g — indicators	✅	Recommended: for critical statuses (`danger`/`warning`), add a distinctive icon or label (not enforced, but good practice)
`role="status"` to announce changes to AT	NN/g	✅	Already in place
Consistent semantic mapping (traffic-light)	Dashboard — color/semantic	✅	success/warning/danger variants
Non-interactive badge — wrap if clickable	NN/g	✅	Existing anti-pattern