# Back link (goodtabs UI)

A quiet arrow link to the parent page. The arrow nudges left on hover.

## Install

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

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

## Usage

```tsx
import { BackLink } from "@/components/ui/back-link"

<BackLink href="/projects">Back to projects</BackLink>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| href | `string | UrlObject` |  | The parent page. Passed to next/link. |
| children | `ReactNode` | `"Back"` | Link text. |
| size | `"sm" | "default"` | `"default"` | Text size: 12px with a 12px arrow, or 14px with a 14px arrow. |

## When to use

- At the top of a detail page that has one obvious parent
- In a settings sub page above the title
- In a drawer or panel that was opened from a list

## When not to use

- When the page sits three or more levels deep, use breadcrumbs
- As a browser back button: it goes to a fixed href, not history
- For forward actions, use the arrow link

## Notes for agents

- It is next/link with the link props, so pass a real href; it does not call router.back()
- Name the destination in children when the parent is not obvious, for example Back to projects
- The arrow moves 2px on hover and focus and stays still under prefers-reduced-motion
- Server component; place it directly above the page heading with a small gap

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