New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

TextLink

StorybookGithub
stable

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.





Code examples

Text links communicate actions and highlight linked resources to users.

TextLink with icon (icon)






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