TextLink

TextLinks communicate actions and linked resources to users.

• How to use TextLinks
• Component variations
• Code examples
• Content recommendations
• Accessibility

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.

<React.Fragment>
  <TextLink linkType="primary">Primary</TextLink>
  <br />
  <TextLink linkType="positive">Positive</TextLink>
  <br />
  <TextLink linkType="negative">Negative</TextLink>
  <br />
  <TextLink linkType="muted">Muted</TextLink>
  <br />
  <TextLink linkType="secondary">Secondary</TextLink>
  <br />
</React.Fragment>
<React.Fragment>
  <TextLink linkType="primary">Primary</TextLink>
  <br />
  <TextLink linkType="positive">Positive</TextLink>
  <br />
  <TextLink linkType="negative">Negative</TextLink>
  <br />
  <TextLink linkType="muted">Muted</TextLink>
  <br />
  <TextLink linkType="secondary">Secondary</TextLink>
  <br />
</React.Fragment>
Hide source

Code examples

Text links communicate actions and highlight linked resources to users.

<React.Fragment>
  <TextLink linkType="primary">Text link</TextLink>
</React.Fragment>
<React.Fragment>
  <TextLink linkType="primary">Text link</TextLink>
</React.Fragment>
Hide source

TextLink with icon (icon)

<React.Fragment>
  <TextLink linkType="primary" icon="ExternalLink">
    Primary
  </TextLink>
  <br />
  <TextLink linkType="positive" icon="ExternalLink">
    Positive
  </TextLink>
  <br />
  <TextLink linkType="negative" icon="ExternalLink">
    Negative
  </TextLink>
  <br />
  <TextLink linkType="muted" icon="ExternalLink">
    Muted
  </TextLink>
  <br />
  <TextLink linkType="secondary" icon="ExternalLink">
    Secondary
  </TextLink>
  <br />
</React.Fragment>
<React.Fragment>
  <TextLink linkType="primary" icon="ExternalLink">
    Primary
  </TextLink>
  <br />
  <TextLink linkType="positive" icon="ExternalLink">
    Positive
  </TextLink>
  <br />
  <TextLink linkType="negative" icon="ExternalLink">
    Negative
  </TextLink>
  <br />
  <TextLink linkType="muted" icon="ExternalLink">
    Muted
  </TextLink>
  <br />
  <TextLink linkType="secondary" icon="ExternalLink">
    Secondary
  </TextLink>
  <br />
</React.Fragment>
Hide source

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”
• Use clear and succinct copy
• If a TextLink is at the end of a sentence, don’t add period after the TextLink

Accessibility

missing