# Outline Badges

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

- Category: Badge
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Prism
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: pill, chip, tag
- Page: https://builder.atheros.ai/components/outline-badge
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_outline_badge/preview-39c46d83d83e.webp

## Features

- Accent palette (red, green, pink, blue, rose, lime, violet, teal, amber) defined as CSS custom properties with separate light and `body.dark` values
- Outline style: transparent fill plus an accent-coloured border built with `color-mix(in srgb, var(--accent) 42%, transparent)`; per-badge accent set via an `ob-{accent}` modifier class
- Selectable badges: clicking fills the pill with a faint accent tint, thickens the border, and adds a ring; `cursor: pointer` and `aria-pressed` reflect state
- A row of icon-only round mini badges below a divider, wrapping fluidly on narrow viewports
- Real Tabler icon paths only (viewBox `0 0 24 24`, stroke `currentColor`, stroke-width 2)
- Fully token-driven, design-system agnostic, responsive to 320px, and respects `prefers-reduced-motion`

## Accessibility

- **Badge selection** — Badges are `<button>` elements with `aria-pressed` toggled on click
- **Mini badges** — Icon-only buttons carry an `aria-label` naming the icon
- **Theme toggle** — `role="switch"` with `aria-checked`, operable via Enter and Space
- **Focus indicators** — `:focus-visible` outline using the `--ring` token
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all transitions

## Keyboard shortcuts

- `Enter` — Toggle the focused badge selection or the theme switch
- `Space` — Toggle the focused badge selection or the theme switch
- `Tab` — Move focus between badges and the theme toggle

## Common questions

**Which frameworks is Outline Badges available in?**

Outline Badges 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 Outline Badges free?**

Outline Badges is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Outline Badges support dark mode?**

Yes. Outline Badges ships light and dark themes, both drawn from the Prism design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Outline Badges 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/outline-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