Components menu
  2. components
  3. navigation
  4. link

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

Props

children
React.ReactNode
The content to display inside link
external
boolean
Use for a links that open a different site
id
string
ID for the link
url
string
The url to link to
onClick
() => void
Callback when a link is clicked

Best practices

Links should:

  • Consist of text that clearly describes either the action that merchants 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 merchants 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