# Arrow link (goodtabs UI)

A plain text link with a small arrow that nudges right on hover and focus.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/arrow-link.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/arrow-link`

## Usage

```tsx
import { ArrowLink } from "@/components/ui/arrow-link"

<ArrowLink href="/docs">Learn more</ArrowLink>
<ArrowLink href="https://github.com/acme" external>View on GitHub</ArrowLink>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| href | `string | UrlObject` |  | Where the link goes. Passed to next/link. |
| external | `boolean` | `false` | Opens in a new tab with rel="noopener noreferrer" and a sr-only note. |
| size | `"sm" | "default"` | `"default"` | Text size: 12px with a 12px arrow, or 14px with a 14px arrow. |
| children | `ReactNode` |  | The link text. Keep it short, two to four words. |

## When to use

- The quiet second action next to a primary button in a hero or section header
- A Learn more or See all link at the end of a feature, card or paragraph
- Anywhere a link should read as a link without an underline

## When not to use

- As the only call to action on a page; use a solid Button for that
- Inside long prose where several links sit in one paragraph; use plain underlined links
- For actions that are not navigation, such as submit or delete

## Notes for agents

- Server component built on next/link, so it needs a Next.js app and a real href; it accepts every Link prop
- Monochrome by design: text stays foreground, the 2px arrow nudge is the hover and focus signal
- The nudge is off under prefers-reduced-motion; the arrow still shows, so the link reads the same
- external adds target, rel and a sr-only (opens in a new tab) note; the visible text does not change

Docs: https://ui.goodtabs.co/components/arrow-link