Tag Badge
badge#tag#pill#filter
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 Tag Badge
Removable tag chips in four style variants with inline add buttons, a fixed toolbar for design-system switching and reset, and dark-mode support.
Features
- Four style variants as rows: **ghost** (subtle), **soft** (light fill), **outline** (1px border), **solid** (primary fill)
- Chip and × radii follow the active design system; the close hover radius is derived from the outer radius and inner padding so its fill stays visually contained
- Clicking × removes the chip with a fade + scale-down animation
- Inline dashed "+ Add" button per row appends a chip with a random label and a pop entrance
- Fixed toolbar in top-right with design-system switcher and reset button
- Design-system switcher retones the whole component across 39 brand themes at runtime
- Fully respects prefers-reduced-motion
Accessibility
- Remove button
- Real
<button aria-label="Remove …">;Enter/Spaceactivate;focus-visiblering - Add button
- Real
<button aria-label="Add … tag">; keyboard operable - Theme toggle
role="switch"witharia-checked, keyboard operable- DS switcher
- Native
<select>with<optgroup>labels andaria-label - Reset button
<button aria-label="Reset all tags">in toolbar- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations and transitions
Customise it with AI
Open Tag 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.
Explore Other Components
View all
Badge Showcase
VanillaReact
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.
#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
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
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
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
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
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
