@contentful/f36-text-link

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

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

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.

Props (API reference)

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