Étiquettes

L’étiquette est un élément interactif permettant d’indiquer une sélection ou de mettre en évidence un lien. 

Exemple

Quand l’utiliser

Le composant est principalement utilisé dans deux contextes :

Premièrement, il peut être utilisé dans un contexte de recherche et de filtre.

Par exemple :

• Dans une page de recherche, une étiquette s’affiche dès qu’un filtre est sélectionné.
• Dans une Liste déroulante de type sélection multiple, une ou plusieurs étiquettes affichent une ou
  plusieurs options sélectionnées.
• Dans une liste de résultats ou d’articles qui sont classés en catégories, les étiquettes affichent le nom des
  catégories.

Exemple

Deuxièmement, le composant peut aussi être aussi utilisé comme un ajout à la navigation. L’étiquette agit comme lien rapide vers des pages de contenu. 

La fiche Les plus consultés contient toutes les informations sur la façon de l'utiliser dans ce contexte.

Les libellés sont clairs et concis. Il ne faut pas dépasser 40 caractères pour les libellés. 

S’il n’est pas possible de respecter la longueur maximale du texte ou si l’espace réservé est restreint (par exemple, au format mobile), le contenu de l’étiquette peut être affiché sur deux lignes maximum. 

Exemple

La hauteur et la largeur de l’étiquette sont variables et dépendent de leur libellé. La hauteur minimale qu’une étiquette doit avoir est de 40 px. La largeur minimale est de 56 px. La hauteur maximale est de 60 px, ce qui correspond à un libellé sur deux lignes, incluant les marges. 

Il faut respecter la marge intérieure entre le libellé et l’étiquette qui est de 8 px à gauche et à droite et de 10 px en haut et en bas.

Le dégagement entre l’icône de suppression « X » et le bord de l’étiquette est de 8 px. Il est le même entre le libellé et l’icône.

L’icône de suppression « X » est de 12 px, horizontalement et verticalement.

Lorsqu’il y a plusieurs étiquettes les unes à côté des autres, l’espacement horizontal et vertical entre chacune est de 8 px. 

États

Exemple