# ArrowLink

> A text link with an arrow that travels and a brand rule that wipes in on hover and focus. Renders an a, or your router's link with asChild.

Section: Motion. Docs: https://entrepta.vercel.app/docs/components/arrow-link

## Install

```bash
npx @entrepta/cli@latest add arrow-link
```

Files: `motion/arrow-link.tsx`.
npm packages: `@phosphor-icons/react`, `@radix-ui/react-slot`.

## Usage

```tsx
import { ArrowLink, ArrowAffordance } from "@/components/entrepta/arrow-link"

<ArrowLink href="/docs">read the docs</ArrowLink>
<ArrowLink href="https://github.com/you" external>github</ArrowLink>
<ArrowLink asChild><Link href="/blog">all posts</Link></ArrowLink>

// a card that is one big link: the footer answers the card's hover
<a href="/post" className="group/arrow">
  <ArrowAffordance>read</ArrowAffordance>
</a>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `external` | `boolean` | false | Up-right arrow, opens in a new tab |
| `asChild` | `boolean` | false | Renders your router's link |