# Arrow Slide Button

> Arrow button where the round arrow chip expands to fill the whole button on hover.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/arrow-slide-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/arrow-slide-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/arrow-slide-button-demo.tsx"
import { ArrowSlideButton } from "@/components/arrow-slide-button"

export default function ArrowSlideButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-neutral-100 p-12 dark:bg-neutral-900">
      <ArrowSlideButton>Get started</ArrowSlideButton>
      <ArrowSlideButton className="bg-indigo-600 dark:bg-indigo-500 dark:text-white">Book a demo</ArrowSlideButton>
    </div>
  )
}
```

## Source

```tsx title="components/arrow-slide-button.tsx"
import * as React from "react"
import { ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"

export function ArrowSlideButton({ className, children, ...props }: React.ComponentProps<"button">) {
  return (
    <button
      type="button"
      className={cn(
        "group relative inline-flex h-12 items-center overflow-hidden rounded-full bg-neutral-900 pr-14 pl-6 text-sm font-medium text-white select-none dark:bg-white dark:text-neutral-900",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span className="transition-transform duration-300 ease-out group-hover:-translate-x-1">{children}</span>
      <span
        aria-hidden
        className="absolute top-1 right-1 flex h-10 w-10 items-center justify-center rounded-full bg-white text-neutral-900 transition-all duration-300 ease-out group-hover:w-[calc(100%-0.5rem)] group-active:scale-[0.97] dark:bg-neutral-900 dark:text-white"
      >
        <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
      </span>
    </button>
  )
}
```