Tag

Les tags sont des éléments visuels informatifs statiques utilisés individuellement ou en groupe pour catégoriser, étiqueter ou indiquer l'état d'un élément.

Quand utiliser

• Catégorisation : pour identifier visuellement le type ou la catégorie d'un contenu ou d’un produit (ex. : “Forfait mobile”, “Box internet”).
• Indication d'état : pour montrer l'état ou le statut d'un élément (ex. : "Nouveau", "En stock", "En cours").

Quand ne pas utiliser

• Sélection / Filtrage : un tag est un élément statique, on n’utilise pas les tags pour filtrer des résultats de recherche. Dans ce cas, on utilise les chips.

• Texte Long : on n’utilise pas les tags pour des informations détaillées ou des descriptions longues. Dans ces cas, on utilisera plutôt le composant text.

Tag ou Sticker ?

• Le Tag permet d’organiser et catégoriser les éléments et d’indiquer l’état ou le statut d’un élément (ex. : “Connecté”, “Non connecté”, “Disponible”).

• Le Sticker est utilisé pour mettre en avant une information importante pour l’utilisateur comme des réductions, des bons plans ou des nouveautés (ex. : “Bon plan”, “-XX€ de remise”, “1 mois offert”).

Les différents statuts du tag :

• Default tag : l’état du tag par défaut peut être utilisé pour afficher ou catégoriser tout type de contenu lorsqu’aucun variant sémantique spécifique n’est nécessaire (error, warning, success, information).

• Information tag : le tag info est utilisé pour communiquer des informations importantes mais non critiques. Il permet de mettre en avant des nouveautés, des recommandations ou des statuts informatifs (ex. : “Nouveau”, “Recommandé”, “Mise à jour”).

• Success tag : le tag succès indique un état positif. Il est utilisé pour signaler des éléments disponibles, des actions réussies ou des statuts favorables (ex. : “En stock”, “Validé”, “Actif”).

• Warning tag : le tag warning permet d’attirer l'attention sur une situation nécessitant une vigilance ou une action. Il est utilisé pour les stocks limités, les échéances proches ou les statuts qui nécessitent une attention particulière (“Bientôt disponible”, “A renouveler”, “En cours”).

• Error tag : le tag erreur permet de signaler un problème, un blocage ou un état critique. Il est utilisé pour indiquer des ruptures de stock, des erreurs système ou des statuts d'alerte (“En rupture”, “Expiré”, “Bloqué”).