# Motion Button Arrow Slide

Call to action button with an arrow that slides in on hover.

- id: `motion-button-arrow-slide`
- Page: https://agentic-ui-kit.com/components/motion-button-arrow-slide
- Live preview: https://agentic-ui-kit.com/live/component/motion-button-arrow-slide?piece=motion-button-arrow-slide

## Install

```bash
agentic-ui add motion-button-arrow-slide
npx shadcn@4.17.0 add @agentic-ui/motion-button-arrow-slide
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** arrow-slide-in, arrow-slide-hover-button, next-step-button, label-shift, reserved-arrow-slot, right-and-up-right-arrows, custom-icon, hover-and-focus-trigger, primary-secondary-outline-variants, three-sizes, link-or-button, no-layout-shift, reduced-motion-fallback
- **Intents:** navigate, execute-flow
- **Suits domains:** marketing, saas, ecommerce, devtools, media, settings
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** call to action button with an arrow that slides in on hover, continue or next step button where the arrow appears and the text shifts, read the docs link button with a diagonal arrow animation, button hover animation: arrow moves right and label shifts, next step button with a sliding arrow on hover
- **Avoid when:** Icon-only buttons (there is no label to shift), Destructive actions, where a forward arrow suggests progress, Touch-only screens, where hover never happens, Buttons with a loading state (use motion-async-button)
- **Preserve when adapting:** native-button-or-link, reserved-arrow-slot, aria-hidden-arrow, arrow-visible-without-motion, focus-visible-trigger
- **Replace when adapting:** label, arrow, icon, variant, size, href
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion