Chips

Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action.

# Usage

Les Chips sont de petits éléments graphiques qui peuvent contenir du texte, des icônes ou des images. Ils sont interactifs et peuvent être cliqués pour déclencher des actions ou supprimer des éléments

  • Filtres de recherche : Pour permettre aux utilisateurs de filtrer les résultats de recherche par différentes catégories.
  • Sélection multiple : Pour permettre aux utilisateurs de sélectionner plusieurs options dans un formulaire ou un menu.
  • Tags ou catégories : Pour afficher des tags ou des catégories liés à un produit, un article, ou une entrée utilisateur.

Quand utiliser

  • Vente : Utiliser des chips pour permettre aux utilisateurs de filtrer les produits par catégorie, prix, marque, etc. Permettre aux utilisateurs de sélectionner des caractéristiques de produit comme la taille, la couleur, ou les fonctionnalités. Afficher des tags liés aux produits pour une navigation facile et rapide.
  • Assistance : Utiliser des chips pour filtrer les articles de la base de connaissances, les FAQ, ou les guides par catégorie ou type de problème. Permettre aux utilisateurs de sélectionner plusieurs sujets ou catégories lors de la recherche de solutions. Afficher des tags ou des catégories liés aux tickets d'assistance pour une gestion efficace.
  • Application/Espace client : Utiliser des chips pour permettre aux utilisateurs de gérer leurs préférences de compte, de notification ou de communication. Permettre aux utilisateurs d’ajouter des tags personnalisés à leurs documents ou leurs transactions pour une organisation facile. Utiliser des chips pour filtrer les transactions par date, type, montant, etc.

Quand ne pas utiliser

  • Actions principales : Pour des actions importantes comme des soumissions de formulaires ou des appels à l'action, utilisez des boutons.
  • Informations critiques : Pour des informations critiques ou des messages d'alerte, utilisez des composants dédiés comme des alertes ou des notifications.
  • Texte long : Pour des textes longs ou des descriptions détaillées, utilisez des paragraphes ou des sections de texte.

# Do & Don't

Ne pas changer l’icône de l’état “Activated”
Les chips ne doivent pas contenir d’action
Les chips doivent être groupé logiquement