TextLink

TextLinks communicate actions and linked resources to users.

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.

<Stack flexDirection="column">
  <TextLink variant="primary">Primary</TextLink>
  <TextLink variant="positive">Positive</TextLink>
  <TextLink variant="negative">Negative</TextLink>
  <TextLink variant="muted">Muted</TextLink>
  <TextLink variant="secondary">Secondary</TextLink>
</Stack>
<Stack flexDirection="column">
  <TextLink variant="primary">Primary</TextLink>
  <TextLink variant="positive">Positive</TextLink>
  <TextLink variant="negative">Negative</TextLink>
  <TextLink variant="muted">Muted</TextLink>
  <TextLink variant="secondary">Secondary</TextLink>
</Stack>
Hide source

Code examples

Text links communicate actions and highlight linked resources to users.

<TextLink variant="primary">Text link</TextLink>
<TextLink variant="primary">Text link</TextLink>
Hide source

TextLink with icon (icon)

<Stack flexDirection="column">
  <TextLink icon={<ExternalLinkIcon />}>Primary</TextLink>
  <TextLink icon={<ExternalLinkIcon />} alignIcon="end">
    Primary
  </TextLink>
</Stack>
<Stack flexDirection="column">
  <TextLink icon={<ExternalLinkIcon />}>Primary</TextLink>
  <TextLink icon={<ExternalLinkIcon />} alignIcon="end">
    Primary
  </TextLink>
</Stack>
Hide source

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

Props of TextLink

• Name

  alignIcon

  Description

  Determines the icon position regarding the link text

  "end"

  "start"
• Name

  as

  Description

  The element used for the root node.

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  icon

  Description

  Expects any of the icon components

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  isDisabled

  Description

  Disabled interaction and applies disabled styles

  false

  true
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  variant

  Description

  Determines style variation of TextLink component

  "muted"

  "negative"

  "positive"

  "primary"

  "secondary"

  "white"