Link

Links are used to embed actions or pathways to more information in a sentence.


Examples

Use for text links in larger spans of text.

Drag to resize example
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
Name
Type
Description
url
string
The url to link to.
children
string or React.ReactNode
The content to display inside link
external
boolean
Use for a links that open a different site
onClick
function()
Callback when a link is clicked

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants need to be able to navigate to other sections of Shopify or take actions wherever they are in the interface.

Solution

Links provide merchants with a way to navigate or take an action in the context of a string of content.


Best practices

Links should:

  • Consist of text that clearly describes either the action that the merchant will take or the location they’ll navigate to.
  • Only be used in a sentence. For stand-alone navigational actions, use the button component

Content guidelines

Links

Links should:

  • Set the expectation of where the merchant will be taken or what action will be performed.
  • Be consistent with the content they point to. If a navigational link leads to a page called Orders, label the link “orders”.
  • Use descriptive text and avoid using generic content such as “click here”.

Do

Learn more about fulfilling orders at the Shopify Help Center

Don’t

Click here to learn more about fulfilling orders

  • Orders

  • To orders section