Badge

A badge is a small non-interactive chip — an accent-coloured symbol plus a text label — that classifies the item next to it. The site’s badge is the link-kind badge on the Links pages: it names what a link points to (a GitHub repo, developer docs, a PDF) beside the entry title. It carries no behaviour: anything clickable is a button, link, or filter chip, never a badge.

↗web GHgithub repo PDFpdf

Visual roles#

• A badge is passive classification and never receives focus
• A documentation-scope link is a rounded, clickable link to a governance rule or implementation detail in a documentation title row
• An interface category is an outlined clickable label that returns to its category group in the Components index
• A collection badge is the filled, clipped label used for an editorial collection; do not use it for a component category or a documentation-scope link

When to use#

• Classify, don’t act — a badge is display text that takes no focus and triggers nothing; a filter chip looks similar but is a button that changes the page
• Place the badge beside the item it describes; it announces a bare classification, so the surrounding content must supply what is being classified
• Meaning never rides on colour or symbol alone — every badge carries a text label, and the accent-coloured symbol only reinforces it
• Current user: the Links list and single pages, driven by each entry’s kind: value; the collection badge and tag pills in the metadata row are separate patterns documented with Page header

Implementation#

{{ 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>

The Hugo partial is layouts/partials/link-kind-badge.html, called from layouts/links/list.html and layouts/links/single.html. It lowercases the kind for matching and for the data-kind attribute, picks the symbol by substring match — so github repo gets GH and developer docs gets DOC — and keeps the value as the visible label; the CSS renders it in uppercase. There is no JavaScript and no separate CSS file; styling is the .link-kind-badge classes in assets/css/site.css.

Options#

Kinds#

Most kinds match by substring anywhere in the value; pdf and design match exactly. Anything unmatched keeps the default ↗ symbol.

Accessibility#

• The badge is a <span> — non-interactive, no focus, and no implicit ARIA role, which is exactly right for a passive label
• The symbol span carries aria-hidden="true" and the visible text label is the accessible name, so screen readers read “github repo”, never “GH”
• Keyboard: nothing to handle — the badge adds no tab stop and never interrupts the focus order of the row it sits in
• Avoid giving a badge behaviour or colour-only variants — a clickable chip belongs to the filter-row pattern, and a badge without its text label has no accessible name left