Components menu
  2. components
  3. navigation
  4. link

Link

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.

Examples

Use for text links in larger spans of text.

Drag to resize example

Props

accessibilityLabel
string
Descriptive text to be read to screenreaders
children
React.ReactNode
The content to display inside the link
external
boolean
Makes the link open in a new tab
id
string
ID for the link
monochrome
boolean
Makes the link color the same as the current text color and adds an underline
removeUnderline
boolean
Removes text decoration underline to the link
url
string
The url to link to
onClick
() => void
Callback when a link is clicked

Accessibility

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.

Do

  • Remove the link underline when link is repeated in a list or navigation
  • Use underlines for links when used inline content
<p>
  Learn more about <Link>Fraud Protect</Link>.
</p>

Don’t

  • Remove underlines when the user cannot determine it's interactivity
<Link removeUnderline>Learn more about Fraud Protect.</Link>

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.

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:

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

Do

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

Don’t

<Link>fulfilling orders</Link>

Do

/* 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>

Don’t

/ 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>

External links

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.

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

Best practices

Buttons versus links

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:

  • a more inclusive experience for assistive technology users
  • a more cohesive visual experience for sighted users
  • products that are easier to maintain at scale

Unstyled links

If the existing link styles don’t meet the needs of your project, then use the UnstyledLink component to create a custom link style.

Content guidelines

The link component should follow the content guidelines for links.

Edit source on GitHub · Preview examples in Chromatic