Forma 36

TextLink

View TextLink on GitHub | View TextLink in Storybook

Text links communicate actions and highlight linked resources to users.

Table of contents

  1. Best practices
  2. Variations
    1. TextLink type
    2. TextLink with icon
  3. Writing guidelines

Best practices

  • Reduce complexity by using a small number of actions. Too many actions can create confusion

TextLink variations

The TextLink component can be configured in a number of different ways. Here is a guide to when to use certain variations.

TextLink type (linkType)

Button TypeNotes
PrimaryThe default styling for TextLinks.
PositiveFor actions with positive results, such as creating a new entity
NegativeFor actions has a negative results, such as deleting an entity
SecondaryUsed for actions with less emphasis
MutedUsed for actions with least amount of emphasis

TextLink with icon (icon)

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