Outline Badges
AI Pass+badge#pill#chip#tag
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 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.
Features
- Accent palette (red, green, pink, blue, rose, lime, violet, teal, amber) defined as CSS custom properties with separate light and
body.darkvalues - Outline style: transparent fill plus an accent-coloured border built with
color-mix(in srgb, var(--accent) 42%, transparent); per-badge accent set via anob-{accent}modifier class - Selectable badges: clicking fills the pill with a faint accent tint, thickens the border, and adds a ring;
cursor: pointerandaria-pressedreflect 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, strokecurrentColor, stroke-width 2) - Fully token-driven, design-system agnostic, responsive to 320px, and respects
prefers-reduced-motion
Accessibility
- Badge selection
- Badges are
<button>elements witharia-pressedtoggled on click - Mini badges
- Icon-only buttons carry an
aria-labelnaming the icon - Theme toggle
role="switch"witharia-checked, operable via Enter and Space- Focus indicators
:focus-visibleoutline using the--ringtoken- Reduced motion
prefers-reduced-motion: reducecollapses all transitions
Customise it with AI
Open Outline Badges 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
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
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
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
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
Outlined Toasts
VanillaReact
A grid of eight outlined toast notifications — each a light-tinted card with a 1.5px coloured outline, a 24px line icon, a short message, and a smoothly filling progress bar. One toast spins a loader; one carries an inline link. Fully token-driven and design-system agnostic.
#toast#notification
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
