TextLinks communicate actions and linked resources to users.
Table of contents
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
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.
Text links communicate actions and highlight linked resources to users.
TextLink with icon (
- To make
TextLinkaction-oriented, use a verb. For example, "Add field", not "New field"
- If a
TextLinkis 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”. Avoid generic descriptions like "click here" or "go to".
- Don't use the page's URL as the link description unless you have a good reason to do so, such as referencing a site's new address.
- Use clear and succinct copy. Aim for a few words or a short phrase.
- If a
TextLinkis used in a regular text and it's at the end of a sentence, don’t add a period inside
TextLinkcontent. Place it after component.
- If a
TextLinkis used as an action-oriented element, don’t add period at all, neither in component content nor after.
- Avoid using extra styling that that make link looks just like regular text.
- If you use
TextLinkfor linking to third party content and use
target="_blank"prop, it is recommended to set
rel="noreferrer noopener". More details about external links security
Props of TextLink
|Determines the icon position regarding the link text|
|ReactElement<any, string | JSXElementConstructor<any>>||Expects any of the icon components|
|Disabled interaction and applies disabled styles|
|primary||TextLinkVariant||Determines style variation of TextLink component|
|a||HTML Tag or React Component, e.g. ||The element used for the root node.|
|string||CSS class to be appended to the root element|
|string||A [data-test-id] attribute used for testing purposes|