Forma 36 Logo

TextLink

View TextLink on GitHub | View TextLink in Storybook

TextLinks communicate actions and highlight linked resources to users.

Best practices

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

Copy considerations

  • 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

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 types (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

With icon (icon)