Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
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