# Link

Takes the user to another page or section. Primary, neutral and on-colour, two sizes, inline and external.

<Preview name="link-variants" title="Styles and sizes" />

## Installation

<ComponentInstall name="link" />

## Usage

```tsx title="app/page.tsx"
import NextLink from "next/link";
import { Link } from "@/components/ui/link";

<Link render={<NextLink href="/services" />}>Services</Link>
```

Without `render`, `Link` renders a plain `<a>`. Use a [Button](/en/docs/components/button) for actions.

## Anatomy

- **Root**: an `<a>`, or any element through `render`.
- **Label**: the link text.
- **External icon** (external links): mirrored in RTL.

## Examples

### Inline

Inside running text, set `inline`. Inline links are always underlined, so they can be told apart without colour (WCAG 1.4.1).

<Preview compact name="link-inline" title="Inline" />

### External

`external` opens a new tab with `rel="noopener noreferrer"`, adds the external-link icon and tells screen readers. Translate the hint with `externalLabel`:

```tsx title="page.tsx"
<Link href="https://dga.gov.sa" external externalLabel="(opens in a new tab)">
  Digital Government Authority
</Link>
```

## RTL

Text and the external-link icon follow the reading direction; the icon is mirrored in Arabic.

<DirectionCompare name="link-inline" title="Inline links" />

## Accessibility

| Key | Action |
| --- | --- |
| <kbd>Tab</kbd> | Moves focus to the link. |
| <kbd>Enter</kbd> | Follows it. |

- A real `<a href>`: works with the keyboard, middle-click and "open in new tab".
- Visited links change colour (`link-primary-visited`). Hover and pressed also underline.
- Focus ring on `:focus-visible` only: 2px `border-black`, 2px offset, white on brand fills.
- A disabled link has no `href`, cannot be focused and is announced as disabled.

## API Reference

<ApiReference component="link" />

## Deviations from DGA

<ComponentDeviations component="link" />

## Contrast

<ComponentContrast component="link" />


---

[Index of every page](https://dga.omqkhafi.dev/en/llms.txt)