Examples
Use for text links in larger spans of text.
Links take users to another place, and usually appear within or directly following a sentence.
For actions that aren’t related to navigation, use the button component.
Use for text links in larger spans of text.
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.
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.
<p>
Learn more about <Link>Fraud Protect</Link>.
</p>
<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.
The 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:
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
<Link>fulfilling orders</Link>
/* Somewhere in the code: */
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
/* Elsewhere in the code: /
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
/ Somewhere in the code: */
<Link url="https://help.shopify.com/manual">fulfilling orders</Link>
/* Elsewhere in the code: */
<Link url="https://help.shopify.com/manual">order fulfillment section</Link>
The 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.
Links are used primarily for navigation, and usually appear within or directly following a sentence.
Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
The HTML that renders for the Button
and Link
components carries meaning. Using these components intentionally and consistently results in:
If the existing link styles don’t meet the needs of your project, then use the UnstyledLink
component to create a custom link style.
The link component should follow the content guidelines for links.