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.
The Link component is underlined to give interactive elements a shape. This allows links to not rely on color from being the only way users can tell if an element is interactive.
- Remove the link underline when link is repeated in a list or navigation
- Use underlines for links when used inline content
Learn more about <Link>Fraud Protect</Link>.
- Remove underlines when the user cannot determine it's interactivity
<Link removeUnderline>Learn more about Fraud Protect.</Link>
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.
Give links text that clearly describes their purpose.
accessibilityLabel prop adds an
aria-label attribute to the link, which can be accessed by assistive technologies like screen readers. Typically, this label text replaces the visible text on the link for merchants who use assistive technology.
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>
external prop adds an icon and a notification that the link opens a new tab. Use the
external prop to make the link open in a new tab (or window, depending on the merchant’s browser settings). Open a page in a new tab only when opening a page in the same tab might disrupt the merchant’s workflow.
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