---
title: "Link"
description: "This article explains what the link field is and how to configure it."
meta_title: "Link"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

The link field allows content writers to create web links. Relative and absolute URLs are supported, as well as linking to Prismic documents and media from the media library.

Prismic provides components for [Next.js](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), and [SvelteKit](https://prismic.io/docs/sveltekit.md) to display links.

**Next.js example:**

```tsx
import { PrismicNextLink } from "@prismicio/next";

<PrismicNextLink field={slice.primary.my_link_field} />;
```

**Nuxt example:**

```vue-html
<PrismicLink :field="slice.primary.my_link_field" />
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";
</script>

<PrismicLink field={slice.primary.my_link_field} />
```

> The link field and the [content relationship field](https://prismic.io/docs/fields/content-relationship.md) look similar. Link fields should be used to create web links, like a "Learn More" link. Content relationship fields should be used to create data structures, like a blog post pointing to its author.

# Add a link field to a content model

1. **Open Slice Machine**

   In your Prismic project, start Slice Machine to begin editing content models.

   ```sh
   npx start-slicemachine --open
   ```

2. **Add a link field**

   In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a **link** field.

   The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name.

   The **API ID** determines the property name in the Content API. Use a short, snake-cased name.

   The **Allow target blank** checkbox determines if a content writer can configure a link to open in a new window.

3. **(Optional) Allow display text**

   Links may need a text label, such as "Our products" or "Learn more." Content writers can provide a label when display text is allowed.

   Open the field settings and check the **Allow display text** setting.

4. **(Optional) Allow variants**

   Links may need a specific visual style, like "Primary" or "Secondary" styling. Content writers can select from a list of styles you set when variants are enabled.

   Open the field settings and enable variants under the **Variants** settings. Add as many variant options as needed.

5. **(Optional) Make the link field repeatable**

   Content writers can provide multiple links from one field when the field is configured to be repeatable.

   Open the field settings and check the **Make this link repeatable** setting.

# Display links

Prismic provides link components for Next.js, Nuxt, and SvelteKit.

**Next.js example:**

```tsx
import { PrismicNextLink } from "@prismicio/next";

<PrismicNextLink field={slice.primary.my_link_field} />;
```

See the [`<PrismicNextLink>` documentation](https://prismic.io/docs/technical-reference/prismicio-next/v2.md#prismicnextlink) to learn more.

**Nuxt example:**

```vue-html
<PrismicLink :field="slice.primary.my_link_field" />
```

See the [`<PrismicLink>` documentation](https://prismic.io/docs/technical-reference/prismic-vue/v4.md#prismiclink) to learn more.

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";
</script>

<PrismicLink field={slice.primary.my_link_field} />
```

See the [`<PrismicLink>` documentation](https://prismic.io/docs/technical-reference/prismic-svelte/v0.md#prismiclink) to learn more.

A repeatable link field can be displayed using a loop.

**Next.js example:**

```tsx
import { PrismicNextLink } from "@prismicio/next";

<ul>
  {slice.primary.my_link_field.map((link) => (
    <li key={link?.text}>
      <PrismicNextLink field={link} />
    </li>
  ))}
</ul>;
```

**Nuxt example:**

```vue-html
<ul>
  <li v-for="link in slice.primary.my_link_field" :key="link?.text">
    <PrismicLink :field="link" />
  </li>
</ul>
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";
</script>

<ul>
  {#each slice.primary.my_link_field as link}
    <li><PrismicLink field={link} /></li>
  {/each}
</ul>
```

# Use variants to style links

[Link variants](#optional-allow-variants) can determine how links are styled. This example adds a CSS class based on the selected variant.

**Next.js example:**

```tsx
<PrismicNextLink
  field={slice.primary.button}
  className={clsx("button", {
    primary: slice.primary.button.variant === "Primary",
    secondary: slice.primary.button.variant === "Secondary",
  })}
/>
```

This example uses [`clsx`](https://www.npmjs.com/package/clsx) to conditionally apply class names.

**Nuxt example:**

```vue-html
<PrismicLink
  :field="slice.primary.button"
  class="button"
  :class="{
    primary: slice.primary.button.variant === 'Primary',
    secondary: slice.primary.button.variant === 'Secondary',
  }"
/>
```

This example uses Vue's [`:class`](https://vuejs.org/guide/essentials/class-and-style) directive to conditionally apply class names.

**SvelteKit example:**

```svelte
<PrismicLink
  field={slice.primary.button}
  class={[
    "button",
    {
      primary: slice.primary.button.variant === "Primary",
      secondary: slice.primary.button.variant === "Secondary",
    },
  ]}
/>
```

This example uses Svelte's [`class`](https://svelte.dev/docs/svelte/class) attribute to conditionally apply class names.

# Check if a link field has a value

Use `isFilled.link()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if a link field has a value.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.link(slice.primary.button)) {
  // Do something if `button` has a value.
}
```

Use `isFilled.repeatable()` to check if a repeatable link field has at least one item.

```ts
import { isFilled } from "@prismicio/client";

if (isFilled.repeatable(slice.primary.buttons)) {
  // Do something if `buttons` has at least one item.
  for (const button of slice.primary.buttons) {
    // Check the individual link using `isFilled.link()`.
    if (isFilled.link(button)) {
      // Do something if `button` has a value.
    }
  }
}
```

[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)

# API response

Here is what a link field looks like from the Content API:

```json
{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io"
  }
}
```

A link configured to open in a new window includes a `target` property.

```json {5}
{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io",
    "target": "_blank"
  }
}
```

A link that has display text or a variant includes a `text` or `variant` property.

```json {5-6}
{
  "example_link_to_media": {
    "link_type": "Web",
    "url": "https://prismic.io",
    "text": "Click Here",
    "variant": "Primary"
  }
}
```

A repeatable link is returned as an array of links.

```json
{
  "example_link_to_media": [
    {
      "link_type": "Web",
      "url": "https://prismic.io"
    },
    {
      "link_type": "Web",
      "url": "https://prismic.io/docs"
    }
  ]
}
```