Étiquettes
L’étiquette est un élément interactif permettant d’indiquer une sélection ou de mettre en évidence un lien.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Les étiquettes peuvent se présenter dans deux variantes principales :
- Étiquette avec suppression
- Étiquette de navigation
Quand l’utiliser
Le composant étiquette s’utilise principalement dans deux contextes distincts : l’affichage de filtres actifs et la navigation rapide vers du contenu.
Étiquette avec suppression
Dans un contexte de recherche ou de filtrage, l’étiquette permet d’illustrer les options sélectionnées par l’utilisateur. Elle est accompagnée d’une icône de suppression (« X ») qui permet de retirer facilement un critère appliqué. L’étiquette doit être suffisamment visible pour indiquer clairement qu’un filtre est en cours.
Cas d’usage courants :
- Lorsqu’un utilisateur sélectionne un filtre sur une page de recherche, une étiquette s’affiche automatiquement.
- Dans une liste d’articles ou de résultats classés par catégories, les étiquettes identifient les catégories associées.
Étiquette de navigation
L’étiquette peut également servir de lien vers une page de contenu. Dans ce cas, elle agit comme un raccourci de navigation, sans icône de suppression. Ce type d’utilisation est détaillé dans la fiche Les plus consultés.
Quand ne pas l’utiliser
Ne pas utiliser l’étiquette si l'information ne doit pas être supprimable ou cliquable.
Dans un contexte de navigation, ne pas utiliser l’étiquette de navigation si le contenu à afficher dépasse largement la limite de caractères recommandée.
Anatomie
- Libellé
- Icône de suppression
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Libellé
Le libellé doit être clair, concis et ne pas dépasser 40 caractères.
Si l’espace est restreint (ex. mobile), le texte peut être affiché sur deux lignes maximum.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Étiquette
Positionnement et alignement : Alignement centré verticalement du texte et de l’icône (si présente).
Dimensions : 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.
Groupe d’étiquettes
Espacements : Lorsqu’il y a plusieurs étiquettes les unes à côté des autres, l’espace de dégagement horizontal et vertical entre chacune est de 8 px.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Étiquette avec suppression
Affiche un filtre actif.
Permet de supprimer le filtre en cliquant sur l’icône « X ».
Étiquette de navigation
Redirige vers une page précise lorsqu’elle est cliquée.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur l’étiquette pour accéder à une page (si navigation).
- Cliquer sur le « X » pour retirer un filtre (si suppression).
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tab permet de naviguer entre les étiquettes.
- Entrée active le lien ou supprime le filtre selon le contexte.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026