<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Link

Hyperlinked text for navigating to a new page.

Use Link...

  • To navigate the user to a new page.
  • To navigate the user to a different section of the same page.
  • To change the URL.
  • To cause a browser redraw/refresh.
  • To download a linked resource.

Don't use Link...

  • To perform actions other than navigation; use Button for this instead. This includes:
    • to trigger an action in the system
    • to prompt the user to perform an action
    • to confirm an action
    • to draw attention to important actions
  • To provide same-page navigation that requires a persistent navigation element as the user scrolls. Use Anchor Bar instead.

The preview has been updated.

Width

Use width="full-width" to make the link fill its container instead of being inline.

The preview has been updated.

Skins

CTA

Use as a call-to-action in Standard Tile or Banner.

Use skin="cta" to position the arrow to the right of the text.

The preview has been updated.

Use skin="cta-left" to position the arrow to the left.

The preview has been updated.

Inside a block of Typography that sets the text
color to white, the CTA link automatically changes its icon to white

The preview has been updated.

Unstyled

  • This variant removes the normal link styling, such as color and underline.
  • Only use it with something that provides its own affordance (that is, something that shows a hover and active state). Otherwise, users won’t have a way to know it’s clickable.
  • A link with the unstyled skin won't show up with normal link styling, although it still gets the "pointer" cursor on hover.

The preview has been updated.

Covering

Use covering to increase the clickable target of a Link to cover the nearest ancestor element that has positioning context. This is usually a Standard Tile or a Card with skin="link".

The preview has been updated.

Use skin="unstyled" to remove the normal link styling.

The preview has been updated.

With icon

  • The "link with icon" feature is a link that has both text and an image or icon, and vertically centers both sub-elements.
  • "Link with icon" can contain any type of image or icon.
  • "CTA link" uses specific text styling and only uses the Arrow icon.

The preview has been updated.

As a Button

Use render for Links with the behavior of a Button. Refer to render guidelines.

The preview has been updated.

Button as a Link

Use render for Buttons with the behavior of a Link. Refer to render prop guidelines.

The preview has been updated.

Global Link Component

Some routing frameworks, like Gatsby, Next, or TanStack Router, suggest using their own Link component for routing. While that can be done at the component level using the as or render props, it can also be configured within SwanProvider. For more information, see the SwanProvider setup docs.

Best practices

Link types

Internal links

  • For text that takes users to another page, or a different section of the same page.
  • Use Anchor Bar to provide same page navigation that requires a persistent navigation element as the user scrolls.

Outbound links

For taking the user to another site.

CTA links

For use as a call-to-action in Standard Tile, Secondary Tile, or Standard Hero.

A list of links

Typically placed in the Navigation menu, a lateral menu, or the Footer of the page.

Unstyled links

For use in components that already provide their own affordance and hover styling, such as Standard Tile. Unstyled links provide no affordance.

Appearance

Avoid changing the styling and type size for links.

Placement

  • Use links in body copy and legal copy.
  • CTA links can be placed as a call-to-action in Standard Tile, Secondary Tile, or Banner.

Content

  • Explanatory
    • Link text should make sense on its own ("click here" doesn’t indicate where you’ll be taken).
    • Help users predict where a link will lead before they click it.
  • Concise
    • Keep the link copy clear and simple—two or three words are recommended. The fewer words, the better, to avoid text wrapping.
  • Purposeful
    • The link text alone should convey the function of the link.
    • Use language that leads users to the next step.
  • Accessible & Inclusive
    • Link text should also be unique and easy to read out loud.
    • Avoid using words that aren't inclusive in your writing, such as "see" or "view."
      • Try "show", "explore", or "browse" instead.
  • Describe the page people will be taken to in the hyperlink.
    • DO: Learn more about our Satisfaction Guarantee
    • DON'T: Learn more about our Satisfaction Guarantee here

SEO considerations

  • Any link to another internal page must be part of the page's source HTML (not dynamically added via JavaScript) for search engines to index it.
  • Add the rel="nofollow" attribute to internal links that are pointing to a page that should not be crawled by search engine bots.

Accessibility

Avoid using the unstyled skin unless there is something else providing visual affordance (not just on hover, since not all users are mouse users).

Props

Link
This component is implemented using the <a /> as the root element. You can utilize the native attributes supported by <a /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "unstyled" | "cta" | "cta-left" | nullfalse
The visual style of the Link. One of: "standard", "cta", "cta-left", "unstyled".
standard
width"standard" | "full-width" | nullfalse
Set the width of the Link. One of: "standard", "full-width".
standard
coveringboolean | nullfalse
Whether the Link's clickable target should cover the entirety of it's nearest ancestor element.
false
withIconboolean | nullfalse
Whether this is a "link with icon".
false
withIconSeparatedboolean | nullfalse
⚠️ Deprecated - `withIconSeparated` behaves the same as `withIcon`, use `withIcon` instead.
@description Whether this "link with icon" has the icon and text visually separated.
false
tostring | nullfalse
Sets the destination URL in case you are setting globalLinkComponent(SwanProvider) to 3rd party library's Link (Gatsby, Next.js, React router, etc.).
null

Related