# Link

Source: https://payloadcms.com/docs/ui-components/link

The `Link` component integrates Next.js navigation with Payload's route-transition state. Use it for links between Admin Panel routes.

## Import

```tsx
import { Link } from '@payloadcms/ui'
```

## Basic usage

**Implementation**

```tsx
<Link className="custom-admin-link" href="/admin/collections/posts">
  View posts
</Link>
```

**Styling**

Pass className="custom-admin-link" to Link, then style that class so other Admin links are unaffected.

```css
.custom-admin-link {
  color: #6d5dfc;
  font-weight: 600;
  text-decoration-color: #b8adff;
  text-underline-offset: 0.2em;
}

.custom-admin-link:hover {
  color: #5947e5;
}
```

- `color`: Link text color.
- `font-weight`: Link emphasis.
- `text-decoration-color`: Underline color.

`Link` does not add visual styling. It inherits typography and color from the surrounding Admin Panel interface.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop             | Type                  | Default | Description                                                |
| ---------------- | --------------------- | ------- | ---------------------------------------------------------- |
| `href` \*        | `string \| UrlObject` | —       | Destination passed to the Next.js router.                  |
| `replace`        | `boolean`             | `false` | Replaces the current history entry instead of adding one.  |
| `scroll`         | `boolean`             | `true`  | Controls whether navigation scrolls to the new page.       |
| `prefetch`       | `boolean`             | —       | Controls Next.js route prefetching.                        |
| `preventDefault` | `boolean`             | `true`  | Lets Payload manage navigation and route-transition state. |
| `onClick`        | `MouseEventHandler`   | —       | Runs before navigation begins.                             |

_\* An asterisk denotes that a prop is required._