---
title: "Link"
description: "Text links, same-page hash handling and new-tab cues."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/components/link
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


`Link` is the styled text link. It renders an anchor with the `link` class, smooth-scrolls to anchors on the same page, and adds safe `rel` values to links that open a new tab. In `@systhemaui/next` it wraps `next/link`, so internal links get client-side navigation and prefetching.

```tsx preview title="Link"
import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph className="max-w-xl">
      Read the <Link href="/getting-started/quick-start">quick start</Link>, then come back here to
      style your first component.
    </Paragraph>
  )
}
```

## Import

```tsx
import { Link } from '@systhemaui/next'
```

In a React app without Next.js, import it from `@systhemaui/react`. That version renders a plain `<a>` with the same class and click handling.

## Examples

### Same-page anchors

A hash `href` that points at the current page scrolls smoothly to the target element instead of jumping. This works for `#id` and for `/current/path#id`. Try it: the link below scrolls to the Accessibility section of this page.

```tsx preview title="Same-page anchor"
import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      Jump to <Link href="#accessibility">the accessibility notes</Link>.
    </Paragraph>
  )
}
```

The scroll is skipped when the target does not exist, when the visitor holds a modifier key or uses another mouse button, and for `target="_blank"`. A bare `href="#"` does nothing at all, instead of jumping to the top of the page.

### Links that open a new tab

With `target="_blank"`, `rel` defaults to `noopener noreferrer`. Pass your own `rel` to override it. Tell screen-reader users that the link opens a new tab with a visually hidden cue:

```tsx preview title="New tab"
import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      See the{' '}
      <Link href="https://tailwindcss.com/docs" target="_blank">
        Tailwind CSS documentation
        <span className="sr-only!"> (opens in new tab)</span>
      </Link>
      .
    </Paragraph>
  )
}
```

### Without the transition

`Link` adds the `transitionClasses` from your [Systhema config](https://docs.systhema.app/ar/next/concepts/configuration.md) (for example `duration-300 ease-out-cubic`), which animate the hover color. Pass `disableAnimation` to drop them.

```tsx preview title="disableAnimation"
import { Link, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <Paragraph>
      This <Link href="#examples" disableAnimation>
        link
      </Link>{' '}
      changes color instantly on hover.
    </Paragraph>
  )
}
```

## Props

`Link` takes every anchor attribute. In `@systhemaui/next` it also takes the `next/link` props (`prefetch`, `replace`, `scroll`), and `href` is required.

<!-- generated:props @systhemaui/react LinkProps -->

| Prop                      | Type      | Default | Description |
| ------------------------- | --------- | ------- | ----------- |
| `className`               | `string`  | -       |             |
| `disableAnimation`        | `boolean` | -       |             |
| …and all `<a>` attributes |           |         |             |

<!-- /generated -->

## HTML and CSS

Without React, add the `link` class to an anchor. The colors come from the `link` tokens of the active color system, with a separate hover color for the text and the underline:

```html
<p class="text-body color-body">
  Read the <a class="link" href="/getting-started/quick-start">quick start</a>.
</p>
<a class="link" href="https://example.com" target="_blank" rel="noopener noreferrer">
  Example<span class="sr-only!"> (opens in new tab)</span>
</a>
```

Add your own transition utilities (`duration-300`) for the hover animation; the component adds them from the config. The smooth hash scrolling is JavaScript, so a plain HTML link jumps.

<!-- generated:utilities link -->

| Class  | Styles                                                                                                                                                                                                                                                                                                                                                                       |
| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `link` | `& { text-decoration: underline; color: var(--color-link-text-default); text-decoration-color: var(--color-link-underline-default); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow, opacity; }`<br>`&:hover { color: var(--color-link-text-hover); text-decoration-color: var(--color-link-underline-hover); }` |

<!-- /generated -->

## Next.js

The `@systhemaui/next` `Link` renders `next/link` through the [`LinkHelper`](https://docs.systhema.app/ar/next/components/utilities.md#linkhelper), so internal routes navigate on the client and prefetch, while the same-page hash scrolling and the `rel` default stay the same as in React. Use it for every internal link in a Next.js app.

```tsx
import { Link } from '@systhemaui/next'

export function Footer() {
  return (
    <nav aria-label="Legal">
      <Link href="/privacy" prefetch={false}>
        Privacy policy
      </Link>
    </nav>
  )
}
```

`Button.a`, `Chip.a`, `Icon.a`, `MediaWrapper.a` and `Card.link` use the same helper.

## Accessibility

- Link text names the destination. Avoid "click here" and bare URLs.
- A link with `target="_blank"` gets `rel="noopener noreferrer"` by default. Add an "(opens in new tab)" cue as visually hidden text (`sr-only!`), or in the `aria-label` of an icon-only link.

See [Links that open a new tab](https://docs.systhema.app/ar/next/concepts/accessibility.md#links-that-open-a-new-tab).

## Related

- [Button](https://docs.systhema.app/ar/next/components/button.md) (`Button.a` for links styled as buttons)
- [Utilities](https://docs.systhema.app/ar/next/components/utilities.md#linkhelper)
- [Typography](https://docs.systhema.app/ar/next/styling/typography.md)