Link

Use the url prop to give the link component a valid href value. This allows the element to be identified as a link to assistive technologies and gives it default keyboard support.

Submitting data

Merchants generally expect links to navigate, and not to submit data or take action. If you need a component that doesn’t have a URL associated with it, then use the button component instead.

Labeling

Give links text that clearly describes their purpose.

To provide consistency and clarity:

• Use the same text for links that navigate to the same content
• Use different text for links that navigate to different content

<Link url="https://help.shopify.com/manual">fulfilling orders</Link>

<Link>fulfilling orders</Link>

<Link url="https://help.shopify.com/manual">fulfilling orders</Link>

<Link url="https://help.shopify.com/manual">order fulfillment section</Link>

External links

The external prop adds an icon and a notification that the link opens a new window. Use the external prop to make the link open in a new window (or tab, depending on the merchant’s browser settings). Open a page in a new window or tab only when opening a page in the same tab might disrupt the merchant’s workflow.

Keyboard support

Links use browser defaults for keyboard interaction.

• Give links keyboard focus with the tab key (or shift + tab when tabbing backwards)
• Activate links with the enter/return key