By default, a link will only navigate the user within the same tab, replacing the page where the user followed the link.

Use target=”_blank” to open the target page in a new tab. A ‘tear-out’ icon that communicates this to the user will display next to the link.

Use the IconComponent prop to customize the icon. You can either provide an alternative icon, or the icon can be disabled by using IconComponent={null}. We only recommend disabling the icon when wrapping another component in a link, never for text-based links. This is because the icon helps the user identify when a link will take them to a new tab.

It is generally considered best practice to almost never open links in new tabs. Opening a link in a new tab is not expected default behavior for web browsers. It makes it harder to return to the previous page, especially for users of screen readers.

There are a few cases where it’s recommended, like when the link is in the middle of a form or multi-step process. This allows users to complete the action without losing their place on the original page.

When linking to third party content, we recommended setting rel=”noopener” or rel=”noreferrer”. Although this is default behaviour in newer browsers, explicitly specifying this helps protect users of legacy browsers. For more information, read “Links to cross-origin destinations are unsafe”.

To help create a visual hierarchy using a link, use the color prop.

The default color is primary.

Links change color after a user clicks on them. This tells the user which links they have already visited.

Note: This prop is deprecated. Use the color prop instead.

To help create a visual hierarchy using a link, use the variant prop.

The default variant is primary.

Using the render prop, you can customize the element rendered by the Link. Props defined on the JSX element will be merged with props from the Link.

The render prop can also accept a function. This approach allows more control over how props are merged, allowing for more precise customization of the component's behavior.

When a function is passed to the render prop, it's your responsibility to merge props within the function itself.

By default, a link will only navigate the user within the same tab, replacing the page where the user followed the link.

Use target=”_blank” to open the target page in a new tab. A ‘tear-out’ icon that communicates this to the user will display next to the link.

Use the IconComponent prop to customize the icon. You can either provide an alternative icon, or the icon can be disabled by using IconComponent={null}. We only recommend disabling the icon when wrapping another component in a link, never for text-based links. This is because the icon helps the user identify when a link will take them to a new tab.

It is generally considered best practice to almost never open links in new tabs. Opening a link in a new tab is not expected default behavior for web browsers. It makes it harder to return to the previous page, especially for users of screen readers.

There are a few cases where it’s recommended, like when the link is in the middle of a form or multi-step process. This allows users to complete the action without losing their place on the original page.

When linking to third party content, we recommended setting rel=”noopener” or rel=”noreferrer”. Although this is default behaviour in newer browsers, explicitly specifying this helps protect users of legacy browsers. For more information, read “Links to cross-origin destinations are unsafe”.

To help create a visual hierarchy using a link, use the color prop.

The default color is primary.

Links change color after a user clicks on them. This tells the user which links they have already visited.

Note: This prop is deprecated. Use the color prop instead.

To help create a visual hierarchy using a link, use the variant prop.

The default variant is primary.

Using the render prop, you can customize the element rendered by the Link. Props defined on the JSX element will be merged with props from the Link.

The render prop can also accept a function. This approach allows more control over how props are merged, allowing for more precise customization of the component's behavior.

When a function is passed to the render prop, it's your responsibility to merge props within the function itself.

By default, a link will only navigate the user within the same tab, replacing the page where the user followed the link.

Use target=”_blank” to open the target page in a new tab. A ‘tear-out’ icon that communicates this to the user will display next to the link.

Use the IconComponent prop to customize the icon. You can either provide an alternative icon, or the icon can be disabled by using IconComponent={null}. We only recommend disabling the icon when wrapping another component in a link, never for text-based links. This is because the icon helps the user identify when a link will take them to a new tab.

It is generally considered best practice to almost never open links in new tabs. Opening a link in a new tab is not expected default behavior for web browsers. It makes it harder to return to the previous page, especially for users of screen readers.

There are a few cases where it’s recommended, like when the link is in the middle of a form or multi-step process. This allows users to complete the action without losing their place on the original page.

When linking to third party content, we recommended setting rel=”noopener” or rel=”noreferrer”. Although this is default behaviour in newer browsers, explicitly specifying this helps protect users of legacy browsers. For more information, read “Links to cross-origin destinations are unsafe”.

To help create a visual hierarchy using a link, use the color prop.

The default color is primary.

Links change color after a user clicks on them. This tells the user which links they have already visited.

Note: This prop is deprecated. Use the color prop instead.

To help create a visual hierarchy using a link, use the variant prop.

The default variant is primary.

Using the render prop, you can customize the element rendered by the Link. Props defined on the JSX element will be merged with props from the Link.

The render prop can also accept a function. This approach allows more control over how props are merged, allowing for more precise customization of the component's behavior.

When a function is passed to the render prop, it's your responsibility to merge props within the function itself.