---
title: 'TextLink'
type: 'component'
status: 'stable'
slug: /components/text-link/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/text-link'
typescript: ./src/TextLink.tsx
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-textlink--basic'
---

`TextLink` communicates actions and links to URLs.

## Import

```jsx static=true
import { TextLink } from '@contentful/f36-components';
// or
import { TextLink } from '@contentful/f36-text-link';
```

## Examples

### As `<a>`

By default, `TextLink` renders `<a>` HTML tag and should be used as an usual link attribute.

Note that if you use `TextLink` for linking to third party content and use `target="_blank"` property, [it is recommended](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/) to set `rel="noreferrer noopener"`.

```jsx file=examples/TextLinkBasicExample.tsx

```

### As `<button>`

`TextLink` can also be rendered as `button` HTML tag. You can use `TextLink` this way only when the action have lower priority compared to actions that are accessible via a `Button`.

There are a number of variations of `TextLink` styles, here is a guide for when to use them:

- **Primary** - Used for primary actions
- **Positive** - Used for a positive actions, such as creating or publishing a new entity.
- **Negative** - Used for destructive actions - when something can't be undone. For example, deleting entities.
- **Secondary** - For actions that should be emphasized less than the default primary style.
- **Muted** - For actions that should be emphasized less than the secondary style.
- **White** - For actions appearing on a dark background.
- **Premium** - For actions that correspond to a paid feature.

```jsx file=examples/TextLinkAsButtonExample.tsx

```

## Props (API reference)

<PropsTable of="TextLink" />

## Content guidelines

- To make `TextLink` action-oriented, use a verb. For example, "Add field", not "New field"
- If a `TextLink` is used to navigate to a new page, clearly communicate what the user will see when they click on the link. For example, “View teams documentation” vs “Learn about teams”. Avoid generic descriptions like "Click here" or "Go to".
- Don't use the page's URL as the link description unless you have a good reason to do so, such as referencing a site's new address.
- Use clear and succinct copy. Aim for a few words or a short phrase.
- If a `TextLink` is used in a regular text and it's at the end of a sentence, don’t add a period inside `TextLink` content. Place it after component.
- If a `TextLink` is used as an action-oriented element, don’t add period at all, neither in component content nor after.

## Accessibility

- Avoid using extra styling that that make link looks just like regular text.
- If you use `TextLink` for linking to third party content and use `target="_blank"` property, it is recommended to set `rel="noreferrer noopener"`. [More details about external links security](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/)