Tag

Stable

Tag qualifie rapidement un objet avec un libelle court. Il peut exprimer un statut, une categorie, une source de donnees, un produit ou un contexte non interactif.

Variants

sell CRM sell Audience sell ABConsent sell ServerSide sell Valide sell Bloque

Property	Values
Tone	neutral, info, success, warning, danger, purple, teal
Variant	outlined, filled
Size	xs, sm, md, lg
Icon	Nom Material Symbols Rounded, sell par defaut
Show icon	true, false

Sizes

sell XS sell Small sell Medium sell Large

Icon

L’icone est une instance configurable. Elle utilise Material Symbols Rounded et reste decorative lorsque le libelle transmet deja toute l’information.

info Information check_circle Synchronise Sans icone

States

Tag n’est pas interactif : pas de hover, focus ou disabled. Utiliser Chip pour une selection ou un filtre manipulable.

Astro

---
import Tag from '../components/ui/Tag.astro';
---

<Tag tone="purple">Audience</Tag>
<Tag tone="success" variant="filled" size="sm">Valide</Tag>
<Tag tone="info" icon="info">Information</Tag>
<Tag tone="neutral" showIcon={false}>CRM</Tag>

Tokens

--tag-{tone}-{variant}-*, --tag-{size}-padding-*, --tag-{size}-gap, --tag-{size}-icon-size, --tag-radius et les tokens typographiques Label associes a chaque taille.

Do / Don’t

Do	Don’t
Utiliser Tag pour une categorie stable.	Utiliser Tag comme bouton.
Garder un libelle court.	Accumuler de nombreux Tags sans hierarchie.
Utiliser les couleurs produit pour identifier un produit.	Melanger les couleurs produit sans contexte.
Utiliser les tons semantiques pour un statut reel.	Utiliser danger comme couleur decorative.

Accessibility

Le texte doit rester comprehensible sans la couleur. Eviter les abreviations non expliquees. Tag ne doit pas recevoir le focus.