@dnb/eufemia/docs/uilib/components/anchor.md

DNB Eufemia Design System UI Library

---
title: 'Anchor (Text Link)'
description: 'Use Anchor to take people to another page, section, or website.'
version: 11.8.2
generatedAt: 2026-07-03T14:39:18.542Z
checksum: 2f8846fac54a31c519386d8947a0566977c4fb617bfc82b267b816c7d3d3a25a
---

# Anchor (Text Link)

## Import

```tsx
import { Anchor } from '@dnb/eufemia'
```

## Description

The Anchor, also known as `Link`, is used to navigate from one page to the next HTML page.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=4243-1500&p=f&t=hDnIGm5ME8DL6NoN-0)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/anchor)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/anchor)

```jsx
import { Link, Anchor } from '@dnb/eufemia'
render(<Anchor href="/uilib/components/anchor">Accessible text</Anchor>)
```

### Combine a Link with an Anchor

You can combine a meta framework link with the Anchor. This way, all the framework-provided features will still work, as well as the behavior of the Eufemia Anchor.

```jsx
import Anchor from '@dnb/eufemia/components/Anchor'
import { Link } from 'react-router-dom'

render(
  <App>
    <Anchor element={Link} to="/path">
      Link
    </Anchor>
  </App>
)
```

## Blank target

**NB:** If you only use a vanilla HTML anchor element including `target="_blank"`, then you have to ensure you add a `title` attribute that includes `Opens a new Window` or as part of the text:

```html
<a
  title="Opens a new Window"
  target="_blank"
  href="https://"
  class="dnb-anchor"
>
  text (opens in new window)
</a>
```

## Security

For security reasons, the Anchor removes `href` and `to` values that use a script-executing protocol (`javascript:` or `vbscript:`), including obfuscated variants such as `java\tscript:`. This prevents cross-site scripting (XSS) when untrusted input is passed to these properties; the element then renders without a link target. Other protocols, such as `data:` and `blob:`, are left untouched.

## Related components

Anchor is part of the [Actions](/uilib/components/overview/#actions) category. Other components for similar needs:

- [Button](/uilib/components/button/) – when people need to start, confirm, or submit an action.
- [HelpButton](/uilib/components/help-button/) – when a short explanation should be available next to a label or control.
- [Menu](/uilib/components/menu/) – when people need to choose from a small list of actions or links.

## Demos

### Basic usage

The basic use of `<Anchor>` is identical to the `<a>` tag.

```tsx
render(
  <Wrapper>
    <ComponentBox data-visual-test="anchor-basic">
      <P>
        This is a regular paragraph with a{' '}
        <Anchor href="https://dnb.no/">link to a website</Anchor> in the
        middle of some text.
      </P>
    </ComponentBox>
  </Wrapper>
)
```

### With icon

Icons can be added with the `icon` and `iconPosition` properties. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).

For Sbanken, links with icons have a slightly different styling that is
not intended to be used in a regular paragraph. The class
`.dnb-anchor--inline` can be used to force default styling even if there
is an icon.

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Example data-visual-test="anchor-icon-right">
        <Anchor
          href="/uilib/components/anchor"
          icon="arrow_right"
          iconPosition="right"
        >
          Anchor with icon right
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-icon-left">
        <Anchor href="/uilib/components/anchor" icon="chevron_right">
          Anchor with icon left
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-icon-node">
        <Anchor
          href="/uilib/components/anchor"
          icon={<IconPrimary icon="question" />}
        >
          Anchor with icon left using a html/react element
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-paragraph">
        <P>
          A text paragraph with an{' '}
          <Anchor
            href="/uilib/components/anchor"
            icon="bell"
            iconPosition="right"
            className="dnb-anchor--inline"
          >
            anchor with icon
          </Anchor>{' '}
          in it.
        </P>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

### On dark surface

Use [Section](/uilib/components/section/demos/#dark-surface) or [Theme.Context](/uilib/usage/customisation/theming/theme#surface-property) with `surface="dark"` to provide dark surface context to supporting components.

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Section
        surface="dark"
        innerSpace
        data-visual-test="anchor-surface-dark"
      >
        <Anchor href="/uilib/components/anchor">Dark surface style</Anchor>
      </Section>
    </ComponentBox>
  </Wrapper>
)
```

### Additional Anchor helper classes

To force a specific state of style, use the following classes to do so:

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--no-underline"
        >
          No underline
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-no-icon">
        <Anchor
          target="_blank"
          href="/uilib/components/anchor"
          className="dnb-anchor--no-icon"
        >
          Blank target without launch icon
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-no-hover">
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--no-hover"
        >
          No hover
        </Anchor>
      </Example>
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--no-radius"
        >
          No border-radius
        </Anchor>
      </Example>
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--no-animation"
        >
          No animation
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-no-style">
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--no-style"
        >
          Reset anchor style
        </Anchor>
      </Example>
      <Example>
        <button className="dnb-anchor">I'm a Button!</button>
      </Example>
      <Example data-visual-test="anchor-newline">
        <Anchor href="/uilib/components/anchor">
          Newline <br />
          Newline
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-skeleton">
        <Anchor skeleton href="/uilib/components/anchor">
          Skeleton
        </Anchor>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

### Anchor modifier properties

- `noAnimation` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
- `noStyle` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
- `noHover` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
- `noUnderline` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>

### Anchor with `target="_blank"`

If the link opens a new window it will automatically get an icon to indicate this.

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Example data-visual-test="anchor-blank">
        <Anchor target="_blank" href="/uilib/components/anchor">
          Blank target with https
        </Anchor>
      </Example>
      <Example>
        <Anchor
          target="_blank"
          href="/uilib/components/anchor"
          icon="arrow_right"
          iconPosition="right"
        >
          Blank target with different launch icon
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-blank-icon-left">
        <Anchor
          target="_blank"
          href="/uilib/components/anchor"
          icon="bell"
          iconPosition="left"
        >
          Blank target with icon to the left
        </Anchor>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

Unless the href contains `:mailto`, `:tel` or `:sms`.

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
      data-visual-test="anchor-protocol"
    >
      <Example>
        <Anchor target="_blank" href="mailto:john.doe@email.com">
          Send a mail to: john.doe@email.com
        </Anchor>
      </Example>
      <Example>
        <Anchor target="_blank" href="tel:12345678">
          Make a phone call to: 12345678
        </Anchor>
      </Example>
      <Example>
        <Anchor target="_blank" href="sms:12345678">
          Send an SMS to: 12345678
        </Anchor>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

### Anchor in headings

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Example data-visual-test="anchor-heading">
        <H2>
          <Anchor
            href="/uilib/components/anchor"
            icon="bell"
            iconPosition="right"
          >
            Inside Headings
          </Anchor>{' '}
          H2
        </H2>
      </Example>
      <Example data-visual-test="anchor-heading-blank">
        <H2>
          <Anchor target="_blank" href="/uilib/components/anchor">
            Blank target in headings
          </Anchor>{' '}
          H2
        </H2>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

### Anchor in Section

```tsx
render(
  <Wrapper>
    <ComponentBox data-visual-test="anchor-in-section">
      <Section
        innerSpace={{
          block: 'large',
        }}
      >
        <Anchor
          className="dnb-anchor--no-underline"
          href="https://dnb.no/"
        >
          Anchor in Section without underline
        </Anchor>
      </Section>
    </ComponentBox>
  </Wrapper>
)
```

```tsx
render(
  <Wrapper>
    <ComponentBox
      scope={{
        Example,
      }}
      data-visual-test="anchor-states"
      hideCode
    >
      <Example>
        <Anchor href="/uilib/components/anchor">Default Style</Anchor>
      </Example>
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--hover"
        >
          Hover Style
        </Anchor>
      </Example>
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--active"
        >
          Active Style
        </Anchor>
      </Example>
      <Example>
        <Anchor
          href="/uilib/components/anchor"
          className="dnb-anchor--focus"
        >
          Focus Style
        </Anchor>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Theme.Context surface="dark">
        <Example>
          <Section
            surface="dark"
            innerSpace
            data-visual-test="anchor-contrast-no-hover"
          >
            <Anchor
              href="/uilib/components/anchor"
              className="dnb-anchor--no-hover"
            >
              Dark surface - no hover
            </Anchor>
          </Section>
        </Example>
        <Example>
          <Section
            surface="dark"
            innerSpace
            data-visual-test="anchor-contrast-no-radius"
          >
            <Anchor
              href="/uilib/components/anchor"
              className="dnb-anchor--no-radius"
            >
              Dark surface - no radius
            </Anchor>
          </Section>
        </Example>
        <Example>
          <Section
            surface="dark"
            innerSpace
            data-visual-test="anchor-contrast-no-underline"
          >
            <Anchor
              href="/uilib/components/anchor"
              className="dnb-anchor--no-underline"
            >
              Dark surface - no underline
            </Anchor>
          </Section>
        </Example>
        <Example>
          <Section
            surface="dark"
            innerSpace
            data-visual-test="anchor-contrast-no-underline-no-hover"
          >
            <Anchor
              href="/uilib/components/anchor"
              className="dnb-anchor--no-underline dnb-anchor--no-hover"
            >
              Dark surface - no underline - no hover
            </Anchor>
          </Section>
        </Example>
        <Example>
          <Section
            surface="dark"
            innerSpace
            data-visual-test="anchor-contrast-no-underline-no-radius"
          >
            <Anchor
              href="/uilib/components/anchor"
              className="dnb-anchor--no-underline dnb-anchor--no-radius"
            >
              Dark surface - no underline - no radius
            </Anchor>
          </Section>
        </Example>
      </Theme.Context>
    </ComponentBox>
  </Wrapper>
)
```

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
        WidthMarkers,
      }}
    >
      <Example data-visual-test="anchor-icon-break">
        <P>
          Some space{' '}
          <Anchor
            href="/uilib/components/anchor"
            icon="bell"
            className="dnb-anchor--inline"
          >
            wordAttachedToIcon longFinalWord
          </Anchor>{' '}
          <WidthMarkers />
        </P>

        <P>
          Some{' '}
          <Anchor
            href="/uilib/components/anchor"
            icon="bell"
            iconPosition="right"
            className="dnb-anchor--inline"
          >
            space wordAttachedToIcon
          </Anchor>{' '}
          longFinalWord <WidthMarkers />
        </P>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

```tsx
render(
  <Wrapper>
    <ComponentBox
      hideCode
      scope={{
        Example,
      }}
    >
      <Example data-visual-test="anchor-no-icon-prop">
        <Anchor href="/uilib/components/anchor" noIcon icon="bell">
          Anchor without icon
        </Anchor>
      </Example>
      <Example data-visual-test="anchor-no-launch-icon-prop">
        <Anchor
          target="_blank"
          href="/uilib/components/anchor"
          noLaunchIcon
        >
          Blank target without launch icon
        </Anchor>
      </Example>
    </ComponentBox>
  </Wrapper>
)
```

```tsx
render(
  <Wrapper>
    <ComponentBox data-visual-test="anchor-disabled">
      <Anchor
        href="/uilib/components/anchor"
        disabled
        tooltip="This is disabled because ..."
      >
        Disabled link
      </Anchor>
    </ComponentBox>
  </Wrapper>
)
```

## Properties

```json
{
  "props": {
    "element": {
      "doc": "Define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element.",
      "type": "React.Element",
      "status": "optional"
    },
    "href": {
      "doc": "Relative or absolute url. Values using a script-executing protocol (`javascript:` or `vbscript:`) are removed for security reasons.",
      "type": "string",
      "status": "optional"
    },
    "to": {
      "doc": "Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. Values using a script-executing protocol (`javascript:` or `vbscript:`) are removed for security reasons.",
      "type": "string",
      "status": "optional"
    },
    "target": {
      "doc": "Defines the opening method. Use `_blank` to open a new browser window/tab.",
      "type": "string",
      "status": "optional"
    },
    "targetBlankTitle": {
      "doc": "The title shown as a tooltip when target is set to `_blank`.",
      "type": "string",
      "status": "optional"
    },
    "tooltip": {
      "doc": "Provide a string or a React Element to be shown as the tooltip content.",
      "type": "string",
      "status": "optional"
    },
    "icon": {
      "doc": "[Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "iconPosition": {
      "doc": "`left` (default) or `right`. Places icon to the left or to the right of the text.",
      "type": ["\"left\"", "\"right\""],
      "status": "optional"
    },
    "noAnimation": {
      "doc": "Removes animations if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "noHover": {
      "doc": "Removes hover effects if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "noStyle": {
      "doc": "Removes styling if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "noUnderline": {
      "doc": "Removes underline if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "noIcon": {
      "doc": "Removes icons if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "noLaunchIcon": {
      "doc": "Removes launch icon if set to `true`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "Disables the Anchor (no navigation, no hover). Keep a short reason nearby (e.g. using the `tooltip` property).",
      "type": "boolean",
      "status": "optional"
    },
    "skeleton": {
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `left` or `right` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

### Router Link

You can make use of the `element` property in combination with the `to` property.

```jsx
import { Link } from 'react-router-dom'

render(
  <Anchor to="/url" element={Link}>
    Link
  </Anchor>
)
```

## Translations

```json
{
  "locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
  "entries": {
    "Anchor.targetBlankTitle": {
      "nb-NO": "Åpner et nytt vindu",
      "en-GB": "Opens a new window",
      "sv-SE": "Öppnar ett nytt fönster",
      "da-DK": "Åbner et nyt vindue"
    }
  }
}
```