TextLink

Import

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 to set rel="noreferrer noopener".

Hide code
function TextLinkBasicExample() {
  return (
    <Stack>
      <TextLink
        href="https://contentful.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Contentful Website
      </TextLink>
      <TextLink
        icon={<ExternalLinkIcon />}
        alignIcon="end"
        href="https://www.contentful.com/developers/docs/"
        target="_blank"
        rel="noopener noreferrer"
      >
        Contentful Documentation
      </TextLink>
    </Stack>
  );
}
function TextLinkBasicExample() {
  return (
    <Stack>
      <TextLink
        href="https://contentful.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Contentful Website
      </TextLink>
      <TextLink
        icon={<ExternalLinkIcon />}
        alignIcon="end"
        href="https://www.contentful.com/developers/docs/"
        target="_blank"
        rel="noopener noreferrer"
      >
        Contentful Documentation
      </TextLink>
    </Stack>
  );
}
Open in Playground

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.

Hide code
function TextLinkAsButtonExample() {
  return (
    <Stack flexDirection="column">
      <TextLink
        as="button"
        variant="primary"
        icon={<PlusIcon />}
        alignIcon="start"
        onClick={() => {
          alert('added');
        }}
      >
        Add field
      </TextLink>
      <TextLink
        as="button"
        variant="positive"
        onClick={() => {
          alert('published');
        }}
      >
        Publish the entry
      </TextLink>
      <TextLink
        as="button"
        variant="negative"
        onClick={() => {
          alert('deleted');
        }}
      >
        Delete the entry
      </TextLink>
      <TextLink
        as="button"
        variant="muted"
        onClick={() => {
          alert('done');
        }}
      >
        Undo your action
      </TextLink>
      <TextLink
        as="button"
        variant="secondary"
        onClick={() => {
          alert('cleared');
        }}
      >
        Clear
      </TextLink>
      <div style={{ background: 'black', padding: '10px' }}>
        <TextLink
          as="button"
          variant="white"
          onClick={() => {
            alert('cleared');
          }}
        >
          Clear
        </TextLink>
      </div>
    </Stack>
  );
}
function TextLinkAsButtonExample() {
  return (
    <Stack flexDirection="column">
      <TextLink
        as="button"
        variant="primary"
        icon={<PlusIcon />}
        alignIcon="start"
        onClick={() => {
          alert('added');
        }}
      >
        Add field
      </TextLink>
      <TextLink
        as="button"
        variant="positive"
        onClick={() => {
          alert('published');
        }}
      >
        Publish the entry
      </TextLink>
      <TextLink
        as="button"
        variant="negative"
        onClick={() => {
          alert('deleted');
        }}
      >
        Delete the entry
      </TextLink>
      <TextLink
        as="button"
        variant="muted"
        onClick={() => {
          alert('done');
        }}
      >
        Undo your action
      </TextLink>
      <TextLink
        as="button"
        variant="secondary"
        onClick={() => {
          alert('cleared');
        }}
      >
        Clear
      </TextLink>
      <div style={{ background: 'black', padding: '10px' }}>
        <TextLink
          as="button"
          variant="white"
          onClick={() => {
            alert('cleared');
          }}
        >
          Clear
        </TextLink>
      </div>
    </Stack>
  );
}
Open in Playground

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