rectangleSélection
Chip
Petite étiquette de rayon 8 pour une métadonnée, un statut ou un filtre.
Aperçu en direct
Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.
ExpressiveRéférence
Ubuntu 24.04 · up 12 dnginx:1.27RunningUpdateStopped
UX / UIRègles illustrées
check_circleÀ faire
RunningStopped
Statut = couleur + mot. Lisible en niveaux de gris et pour les daltoniens.cancelÀ éviter
Des pastilles vert / rouge sans texte : illisible pour 8 % des hommes.check_circleÀ faire
Peu d'options : chips filtre, un tap par choix.cancelÀ éviter
MaisonTrajet
Chips en pilule : elles se confondent avec des boutons.Variante M3EMême composant, mêmes rôles, autre matière
PlazaWii U / 3DS
TremblementsSueursEn ligne
En Plaza, les chips deviennent des pilules : l'écart avec les boutons se fait par la hauteur (28 contre 44).
ChromeY2K
Runningnginx:1.27Online
En Chrome, coins asymétriques 3/10px, Michroma 9px. L'actif passe en tertiary, la touche acide du schéma.
infoSpécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.
Petite étiquette de 8px de rayon pour une métadonnée, un statut ou un choix filtrant.
Variantes
chip pleine secc : métadonnée importante (« Ubuntu 24.04 · up 12 d »).chip-outline : métadonnée discrète.chip ok / warn / bad avec .led : statut, toujours avec un mot.chip-filter (+ .on) : choix multiple court (symptômes, lieu).
Règles
- Rayon
radius-chip 8px, jamais une pilule : la pilule est réservée aux boutons.
- Texte 12px / 600 (filtre : 14px / 500).
- Les choix de moins de 8 options se font en chips filtre, pas en liste déroulante.