Reference specimen. Example copy comes from the Pelote specs and is in French.
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.
infoReference specimen. Example copy comes from the Pelote specs and is in French.
A small 8px-radius label for metadata, status or a filtering choice.
Rules
chip is full secc for important metadata; chip-outline for discreet metadata; chip ok / warn / bad with .led for status, always with a word; chip-filter (+ .on) for a short multiple choice.
8px radius, never a pill: pills are reserved for buttons. Text 12px / 600 (filter 14px / 500).
Choices with fewer than 8 options use filter chips, not a dropdown.