Status Badge

Features

• Four badge groups on a ruled property-sheet layout: mono overline rails with live item tallies on the left, badge rows on the right
• Status pills with halo dot indicators for six semantic statuses (Backlog, Next, In Progress, Blocked, Review, Completed)
• Label chips with mono issue tallies (Feature, Bug, Design, Documentation, Urgent)
• Outline priority badges with ascending signal-meter bars (Low, Medium, High, Critical)
• Solid release badges that invert to bright plates with dark ink in dark mode (New, Beta, Stable, Deprecated, Sunset)
• Every badge reveals a floating remove cross on hover or focus-within
• Removing a badge plays a scale-and-fade exit while all remaining badges glide to their new positions with a FLIP transform pass — including cross-row reflows
• Removed badges persist in localStorage; a Restore control in the component header brings back the stock set
• Screen-reader announcements for removal and restore via an aria-live region
• Eight-hue Harbor Signal palette with per-theme base and ink pairs holding WCAG AA contrast in light and dark
• Fully respects prefers-reduced-motion with instant reflow

Accessibility

Badge removal

Each remove cross is a <button> with aria-label="Remove {label} from {group}"

Remove reveal

Cross appears on :hover and :focus-within, so keyboard focus always shows it

Restore control

<button> with aria-label="Restore all removed badges", hidden while nothing is removed

Removal feedback

aria-live="polite" region announces removals and restores

Focus continuity

After a keyboard removal, focus moves to the next badge's remove button

Group semantics

Each group is a <section> with aria-labelledby pointing at its rail label

Decorative marks

Dots, meters, and tallies on rails are aria-hidden

Focus indicators

:focus-visible outline in --primary on all interactive elements

Reduced motion

prefers-reduced-motion: reduce collapses all motion; removal reflow is instant

Customise it with AI

Open Status Badge in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the badge is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.