Links take users to another place, and usually appear within or directly following a sentence.


    Down Arrow

    Use for text links in larger spans of text.

    For actions that aren’t related to navigation, use the button component.

    Best practices

    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

    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.

    • For actions that don’t appear within or directly following a sentence, use the button component


    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.


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

    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.


    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


    <Link url="">fulfilling orders</Link>


    <Link>fulfilling orders</Link>


    /* Somewhere in the code: */
    <Link url="">fulfilling orders</Link>

    /* Elsewhere in the code: */ <Link url="">fulfilling orders</Link>


    /* Somewhere in the code: */
    <Link url="">fulfilling orders</Link>

    /* Elsewhere in the code: */ <Link url="">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.

    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