Import
import { TextLink } from '@contentful/f36-components';// orimport { 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)
Open in StorybookName | 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 insideTextLink
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 usetarget="_blank"
property, it is recommended to setrel="noreferrer noopener"
. More details about external links security