# Badge Arrow Button

> A pill button with a primary-color gradient circle badge that inverts on hover with a diagonal arrow slide animation — pure CSS transitions, no keyframes required.

- Category: Button
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: badge, gradient, animation
- Page: https://builder.atheros.ai/components/badge-arrow
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_badge_arrow/preview-36474796fce0.webp

## Features

- Pill button with rounded-full border and surface background
- Gradient circle badge (primary to darkened-primary) positioned at the trailing edge
- On hover: pill fills with gradient, text becomes on-primary color, border disappears
- On hover: badge inverts to white background, arrow icon changes to gradient start color
- Dual SVG arrow technique — first icon slides out top-right, second slides in from bottom-left
- Active press nudges the button down 1px (`translateY`) for tactile feedback
- Prefers-reduced-motion support collapses all animations

## Accessibility

- **Button label** — `<button>` has `aria-label` matching its visible text
- **Native button semantics** — Plain `<button type="button">` — press state is tracked via `data-pressed`, never `aria-pressed`, so it keeps announcing as a push button rather than a toggle
- **Keyboard activation** — Native `<button>` activation on `Enter` and `Space` — no JS key handling needed
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Badge aria-hidden** — Arrow badge container has `aria-hidden="true"` (decorative)
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses all transitions to 0.01ms

## Keyboard shortcuts

- `Enter / Space` — Activate the focused button
- `Tab` — Move focus between interactive elements

## Common questions

**Which frameworks is Badge Arrow Button available in?**

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

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

**Does Badge Arrow Button support dark mode?**

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

## Get the code

Preview Badge Arrow Button 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/badge-arrow

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