Badge

Un badge est une petite pastille non interactive — un symbole en couleur d’accent plus un libellé texte — qui classe l’élément à côté de lui. Le badge du site est le badge de type de lien sur les pages Liens : il nomme ce vers quoi un lien pointe (un dépôt GitHub, une documentation, un PDF) à côté du titre de l’entrée. Il ne porte aucun comportement : tout ce qui est cliquable est un bouton, un lien ou une chip de filtre, jamais un badge.

↗web GHgithub repo PDFpdf

Rôles visuels#

• Un badge est une classification passive et ne reçoit jamais le focus
• Un lien de portée documentaire est un lien cliquable arrondi vers une règle de gouvernance ou un détail d’implémentation dans une rangée de titre documentaire
• Une catégorie d’interface est un libellé cliquable avec contour qui ramène à son groupe de catégories dans l’index des composants
• Un badge de collection est le libellé plein et découpé d’une collection éditoriale; ne l’utilisez pas pour une catégorie de composant ou un lien de portée documentaire

Quand l’utiliser#

• Classer, pas agir — un badge est du texte affiché qui ne reçoit pas le focus et ne déclenche rien; une chip de filtre lui ressemble mais est un bouton qui change la page
• Placez le badge à côté de l’élément qu’il décrit; il annonce une classification brute, donc le contenu environnant doit indiquer ce qui est classé
• Le sens ne repose jamais sur la couleur ou le symbole seuls — chaque badge porte un libellé texte, et le symbole en couleur d’accent ne fait que le renforcer
• Utilisateur actuel : les pages de liste et d’entrée de la section Liens, pilotées par la valeur kind: de chaque entrée; le lien de collection et les tags de la rangée de métadonnées sont des motifs distincts documentés avec En-tête de page

Implémentation#

{{ with .Params.kind }}{{ partial "link-kind-badge.html" (dict "kind" .) }}{{ end }}

<span class="link-kind-badge" data-kind="github repo">
  <span class="link-kind-badge-symbol" aria-hidden="true">GH</span>
  <span>github repo</span>
</span>

Le partial Hugo est layouts/partials/link-kind-badge.html, appelé par layouts/links/list.html et layouts/links/single.html. Il met le type en minuscules pour la correspondance et pour l’attribut data-kind, choisit le symbole par correspondance de sous-chaîne — github repo obtient GH et developer docs obtient DOC — et garde la valeur comme libellé visible; le CSS la met en majuscules. Il n’y a ni JavaScript ni fichier CSS distinct; le style vient des classes .link-kind-badge dans assets/css/site.css.

Options#

Types#

La plupart des types correspondent par sous-chaîne n’importe où dans la valeur; pdf et design correspondent exactement. Tout ce qui ne correspond pas garde le symbole ↗ par défaut.

Accessibilité#

• Le badge est un <span> — non interactif, sans focus et sans rôle ARIA implicite, exactement ce qu’il faut pour une étiquette passive
• Le <span> du symbole porte aria-hidden="true" et le libellé texte visible est le nom accessible; les lecteurs d’écran lisent « github repo », jamais « GH »
• Clavier : rien à gérer — le badge n’ajoute aucun arrêt de tabulation et n’interrompt jamais l’ordre de focus de la rangée où il se trouve
• Évitez de donner un comportement au badge ou des variantes reposant sur la couleur seule — une pastille cliquable relève du motif de la rangée de filtres, et un badge sans son libellé texte n’a plus de nom accessible