Forma 36 - 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".


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.
Premium - For actions that correspond to a paid feature.


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>
      <TextLink
        as="button"
        variant="premium"
        onClick={() => {
          alert('accessing premium feature');
        }}
      >
        Upgrade
      </TextLink>
    </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>
      <TextLink
        as="button"
        variant="premium"
        onClick={() => {
          alert('accessing premium feature');
        }}
      >
        Upgrade
      </TextLink>
    </Stack>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
alignIcon	"end" "start" Determines the icon position regarding the link text	start
as	HTML Tag or React Component (e.g. div, span, etc) The element used for the root node.	a
children	ReactNode
className	string CSS class to be appended to the root element
icon	ReactElement<any, string \| JSXElementConstructor<any>> Expects any of the icon components
isDisabled	false true Disabled interaction and applies disabled styles	false
testId	string A [data-test-id] attribute used for testing purposes
variant	"muted" "negative" "positive" "primary" "secondary" "white" "premium" Determines style variation of TextLink component	primary

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

Import

Examples

As <a>

As <button>

Props (API reference)

Name

Type

Default

Content guidelines

Accessibility

Help improve this page

As `<a>`

As `<button>`