# Specimen Badge

> An archival specimen-label badge set — five sharp zero-radius variants: catalog labels with accession codes, semantic inspection stamps, dismissible tags with a springy press, tabular-numeral count blocks, and square status lamps. Includes a reset toolbar and dark-mode support.

- Category: Badge
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: tag, label, status
- Page: https://builder.atheros.ai/components/specimen-badge
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_specimen_badge/preview-d8e2f6fba2a9.webp

## Features

- Five variant rows in one committed archival voice: **catalog** (hairline frame + accession code cell), **stamps** (semantic info/success/warning/error inspection stamps), **tags** (dismissible with a working ×), **counts** (knockout ink count blocks in tabular numerals), **status** (square indicator lamps)
- Specimen geometry follows the active design system: chip corners read `--badges-radius` (falling back to `--chips-radius`) capped at half the chip's nominal height, so sharp systems stay archival-sharp while pill systems get their signature pill. The 1px ink hairline frames, dashed row separators, and square state marks are unchanged
- The archival mounting board consumes design-system card radius and light/dark elevation without rounding the specimens themselves
- Uppercase tracked monospace labels with numbered row indices in a contrast-safe, hue-preserving accent ink
- Dismissible tags carry a hard offset shadow that collapses on a springy press, then fade + scale away on remove
- Inline dashed "+ Add" button on the tags row appends a chip with a random archival label and a pop entrance
- Fixed toolbar in top-right with a reset button that rebuilds the whole matrix
- Fully respects prefers-reduced-motion

## Accessibility

- **Remove button** — Real `<button aria-label="Remove …">`; `Enter`/`Space` activate; `focus-visible` ring
- **Add button** — Real `<button aria-label="Add … badge">`; keyboard operable
- **Reset button** — `<button aria-label="Reset all specimen badges">` in toolbar
- **Decorative marks** — Stamp squares and status lamps carry `aria-hidden="true"`
- **Focus indicators** — `:focus-visible` with contrast-safe `--sp-focus-ink` outline on all interactive elements
- **Structure and live feedback** — Variant sections use hierarchical headings; add, remove, and reset actions announce through a polite live region; load failures use a visible alert
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations and transitions

## Keyboard shortcuts

- `Enter` — Activate the focused remove button, add button, or reset button
- `Space` — Activate the focused remove button, add button, or reset button
- `Tab` — Move focus between the toolbar, remove buttons, and the add button

## Common questions

**Which frameworks is Specimen Badge available in?**

Specimen Badge 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 Specimen Badge free?**

Yes. Specimen Badge is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Specimen Badge support dark mode?**

Yes. Specimen Badge ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Specimen Badge 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/specimen-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