This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

TextLink

TextLinks communicate actions and linked resources to users.

Table of contents

How to use TextLinks

  • TextLinks are used to display actions that have a lower priority compared to actions that are accessible via a button.
  • They should also be used when linking to URLs, and are preferred over using buttons when used for this purpose.
  • Use clear, succinct, and accurate labels
  • Start TextLink labels with verbs, for example "Add field", not "New field"
  • Reduce complexity by using a small number of actions. Too many actions can create confusion when having to decide

Component variations

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

  • Primary - Used for primary actions, or the default for links to URLs.
  • 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.

Code examples

Text links communicate actions and highlight linked resources to users.

Content recommendations

  • 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" prop, it is recommended to set rel="noreferrer noopener". More details about external links security

Props of TextLink

NameRequiredDefaultTypeDescription
alignIconstart
"end"
"start"
Determines the icon position regarding the link text
iconReactElement<any, string | JSXElementConstructor<any>>Expects any of the icon components
isDisabledfalse
false
true
Disabled interaction and applies disabled styles
variantprimaryTextLinkVariantDetermines style variation of TextLink component
asaHTML Tag or React Component, e.g. div, span, etc.The element used for the root node.
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes