- Accueil
- Design
- Composants
- Pastille
Pastille
En exploration
Cet élément est maintenant disponible et peut être utilisé pour répondre aux besoins actuels. Son contenu et ses spécifications peuvent évoluer à la lumière des besoins et des retours d’utilisation. Les rétroactions des équipes sont les bienvenues et contribuent à son amélioration.
Les pastilles sont utilisées pour indiquer des états ou des catégories associées à un élément.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie et des contenus. Pour plus d’informations sur la composition, consulter l’onglet « Spécifications ».
Variantes disponibles
Ce composant se décline en quatre variantes :
- Pastille bleue
- Pastille verte
- Pastille rouge
- Pastille grise
Quand l’utiliser
Les pastilles sont utiles pour visualiser des états ou des catégories. Par exemple, les pastilles peuvent indiquer les priorités dans une application de gestion des tâches, le statut des messages dans une messagerie, les événements spéciaux dans un calendrier, etc.
Les pastilles sont utilisées pour diverses informations contextuelles selon leur couleur. Les définitions suivantes servent de référence et illustrent des usages fréquents pour certaines couleurs, sans pour autant en limiter l’emploi à ces seuls cas. Une logique doit être instaurée de façon transversale dans le site ou l’application.
Bleue
Éléments sélectionnés ou actifs. Informations importantes.
Verte
Éléments réussis, confirmés. Un état positif ou une action approuvée.
Rouge
Éléments en erreurs ou états critiques. Situations nécessitant une intervention immédiate.
Grise
Éléments neutres, informations supplémentaires, non prioritaires dans le contexte actuel.
Quand ne pas l’utiliser
Ne pas utiliser les pastilles si leur signification n’est pas claire pour les utilisateurs ou si elles ne sont pas nécessaires pour la compréhension de l’information affichée.
Il ne faut pas utiliser la pastille comme des étiquettes cliquables ou supprimables. La pastille est destinée à indiquer un état et n'est pas interactive, tandis que l'étiquette est conçue pour être cliquable et/ou supprimable (filtres, liens, etc.).
Anatomie
- Libellé
- Arrière-plan coloré
- Icône
Optionnelle
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Libellé
Le libellé doit compter entre 1 et 18 caractères et suivre les orientations sur la microrédaction.
Icône
L’icône est optionnelle et doit suivre les orientations sur l’iconographie.
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 les trousses de design.
Composition
Cette section documente le positionnement, les dimensions et les espacements des éléments constitutifs du composant.
Pastille (au complet)
Positionnement et alignement : Les pastilles doivent être alignées de manière cohérente par rapport au contenu environnant. Elles doivent être centrées verticalement par rapport au texte ou à l’élément auquel elles sont associées, et leur positionnement horizontal doit être équilibré pour assurer une présentation uniforme et esthétique.
Dimensions : Les pastilles s’adaptent à la longueur de leur texte, mais elles ne dépassent pas une largeur de 136 px (ou 18 caractères). La hauteur reste toujours la même.
Espacements : L’espacement minimal entre une pastille et le contenu environnant, qu’il s’agisse d’un titre, de texte ou d’autres pastilles, est de 8 px. Cet espacement permet de garantir une bonne lisibilité et une séparation visuelle claire entre la pastille et les éléments adjacents.
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
Le composant n’est pas interactif.
Interaction
Aucune interaction par la souris ou le clavier n’est requise.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- 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 : 7 octobre 2026