# 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.

- Category: Badge
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: tag, pill, filter
- Page: https://builder.atheros.ai/components/tag-badge
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_tag_badge/preview-1931ed86118e.webp

## 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`/`Space` activate; `focus-visible` ring
- **Add button** — Real `<button aria-label="Add … tag">`; keyboard operable
- **Theme toggle** — `role="switch"` with `aria-checked`, keyboard operable
- **DS switcher** — Native `<select>` with `<optgroup>` labels and `aria-label`
- **Reset button** — `<button aria-label="Reset all tags">` in toolbar
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations and transitions

## Keyboard shortcuts

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

## Common questions

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

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

Yes. Tag 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 Tag Badge support dark mode?**

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

## Get the code

Preview Tag 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/tag-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