Badge Showcase
AI Pass+badge#tag#pill
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Badge component
About Badge Showcase
A showcase of badge variants rendered bare on the page — category tags, dot badges, three sizes, and a full named-color palette in solid and dotted styles. Token-driven and dark-mode ready.
Features
- Four badge variant groups displayed bare on the page with no wrapping card
- Category tag badges with outline borders and hover feedback
- Dot badges with colored indicator circles for each category
- Small, medium, and large size variants sharing one pill shape
- A full named-color palette rendered in both solid and dotted styles via color-mix
- All badge labels are HTML-escaped to prevent XSS injection
- Fully respects prefers-reduced-motion
Accessibility
- Theme toggle
role="switch"witharia-checkedtoggled by JS- Keyboard activation
- Theme toggle responds to Enter and Space keys
- Focus indicators
:focus-visiblewith--ringoutline on interactive elements- XSS-safe labels
esc()HTML-escapes all badge label text- Reduced motion
prefers-reduced-motion: reducedisables all animations and transitions
Customise it with AI
Open Badge Showcase 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.
Explore Other Components
View all
Status Badge
VanillaReact
A harbor-signal badge board in four hairline-ruled groups — dot status pills, counted label chips, priority meters, and solid release badges. Every badge is removable: it exits with a scale fade while survivors glide into place via FLIP, with localStorage persistence and a restore control.
#badge#tag#pill
Tag Badge
VanillaReact
Removable tag chips in four style variants with inline add buttons, a fixed toolbar for design-system switching and reset, and dark-mode support.
#badge#tag#pill
Outline Badges
VanillaReact
A colourful gallery of outlined category label badges — each fully-rounded pill has a transparent fill with an accent-tinted border, a leading Tabler icon, and an accent-coloured label, plus a row of icon-only mini badges. Every badge is individually selectable with a fill-on-select effect.
#badge#pill#chip
Label Badges
VanillaReact
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.
#badge#label#tag
Specimen Badge
ReactVanilla
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.
#badge#tag#label
Modal — Aperture
VanillaReact
An accessible observatory-style dialog that opens through an animated circular aperture, with keyboard support and light and dark themes.
#modal#dialog#animation
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
