# Label Badges

> A freight-tag label badge board in five labeled groups — chamfered tag plates in tint, frame, solid, tally, and icon-mark styles with mono count chips, selectable check-morph badges, a live summary, inline add and remove with localStorage persistence, keyboard navigation, and skeleton loading.

- Category: Badge
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: label, tag, chip
- Page: https://builder.atheros.ai/components/label-badge
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_label_badge/preview-20f5bdeb60b0.webp

## Features

- Five simultaneous labeled groups following the badge-family showcase pattern (`.lb-group` sections with mono overline labels and hairline rules): Collections (tint), Workspace (frame), Signals (solid), Tallies (tally dot), and Marks (icon-only)
- Chamfered freight-tag plate geometry with design-system-aware board shape and elevation
- Curated nine-hue industrial signal spectrum (scarlet, magenta, plum, indigo, cobalt, steel, forest, citron, graphite) emitted by the Freight Citron design system as `--color-lb-*` / `--color-lb-*-dark` pairs and aliased per theme in `css/variables.css`
- Every label badge carries a Space Mono count chip from `js/data.js` counts; tally plates lead with an accent dot instead of an icon
- Selectable badges everywhere: the Tabler icon cross-morphs into a check (transform and opacity only), the frame layer fills with the accent, and a dashed summary strip reports "N selected" with a Clear all action
- Inline label management scoped to the Collections group: a dashed "New label" ghost swaps into a citron chamfered editor plate — Space Mono uppercase input with citron caret, confirm (check) and cancel (x) icon buttons, Enter commits, Escape cancels, empty submits flash the error frame — new labels take the next accent in rotation, chips expose a hover/focus remove button, and Reset restores the stock set, all persisted in localStorage
- `js/api.js` exposes a swap-for-fetch API seam; chamfered shimmer skeletons fill every group while loading
- Roving arrow-key navigation across all groups (Left/Right/Home/End) with Delete removing the focused Collections badge
- Contrast-safe nine-hue roles, localized counts, guarded persistence, visible async errors, and robust action targets

## Accessibility

- **Badge selection** — Badges are `<button>` elements with `aria-pressed` and a descriptive `aria-label` including the count
- **Remove buttons** — Each editable chip's remove button carries `aria-label="Remove {label}"`, appears on hover or focus-within, and shifts to an error-tinted fill on its own hover/focus-visible — `clip-path` clips the outline, so the fill shift is the focus affordance
- **Summary strip** — The "N selected" text region uses `aria-live="polite"`
- **Group structure** — Each style family is a `<section>` with a visible group label
- **Roving tabindex** — One tab stop across the whole board; arrows, Home and End move focus
- **Focus indicators** — Global `:focus-visible` outline using the contrast-safe `--focus-ink` token
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all motion

## Keyboard shortcuts

- `ArrowRight / ArrowLeft` — Move focus to the next / previous badge across groups (wraps)
- `Home / End` — Focus the first / last badge
- `Delete / Backspace` — Remove the focused Collections badge
- `Enter` — Commit the new-label input or toggle the focused badge selection
- `Escape` — Cancel the new-label input
- `Space` — Toggle the focused badge selection
- `Tab` — Move between the Reset action, the board, and the summary

## Common questions

**Which frameworks is Label Badges available in?**

Label Badges ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Label Badges free?**

Label Badges is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Label Badges support dark mode?**

Yes. Label Badges ships light and dark themes, both drawn from the Triangulum design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Label Badges live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/label-badge

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt