---
title: 'Anchor (Text Link)'
description: 'The Anchor, also known as "Link" is used to navigate from one page to the next HTML page.'
version: 11.2.2
generatedAt: 2026-05-11T08:17:54.616Z
checksum: e0c93f5872857a54516c5d10979a9cf859f429d97a14c72576018d152c739499
---
# 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(Accessible text)
```
### 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(
Link
)
```
## 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
text (opens in new window)
```
## Demos
### Basic usage
The basic use of `` is identical to the `` tag.
```tsx
render(
A text paragraph with an{' '}
anchor with icon
{' '}
in it.
)
```
### On dark surface
```tsx
render(Dark surface style)
```
### Additional Anchor helper classes
To force a specific state of style, use the following classes to do so:
```tsx
render(
No underline
Blank target without launch icon
No hover
No border-radius
No animation
Reset anchor style
Newline
Newline
Skeleton
)
```
### Anchor modifier properties
- `noAnimation` - No Animation
- `noStyle` - No Style
- `noHover` - No Hover
- `noUnderline` - No Underline
### Anchor with `target="_blank"`
If the link opens a new window it will automatically get an icon to indicate this.
```tsx
render(
Blank target with https
Blank target with different launch icon
Blank target with icon to the left
)
```
Unless the href contains `:mailto`, `:tel` or `:sms`.
```tsx
render(
Send a mail to: john.doe@email.com
Make a phone call to: 12345678
Send an SMS to: 12345678
)
```
### Anchor in headings
```tsx
render(
Inside Headings
{' '}
H2
Blank target in headings
{' '}
H2
)
```
### Anchor in Section
```tsx
render(
Anchor in Section without underline
)
```
```tsx
render(Default Style
Hover Style
Active Style
Focus Style
)
```
```tsx
render(
Dark surface - no hover
Dark surface - no radius
Dark surface - no underline
Dark surface - no underline - no hover
Dark surface - no underline - no radius
)
```
```tsx
render(
Some space{' '}
wordAttachedToIcon longFinalWord
{' '}
Some{' '}
space wordAttachedToIcon
{' '}
longFinalWord
)
```
```tsx
render(
Anchor without icon
Blank target without launch icon
)
```
```tsx
render(
Disabled link
)
```
## 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.",
"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.",
"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(
Link
)
```
## 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"
}
}
}
```