Link

Links can be used to navigate to a different page within the application, navigate to an entirely different site, jump to an element on the same page, or link to emails or phone numbers. By default, the <Link /> component renders an <a> but also supports routing frameworks. See Global override below for more details.

A <Link /> requires a value for the label and href props.

Show codeCopy code

There are three different tones available, brand (default), neutral, and inverted.

• When a more subtle link is desired, opt for the neutral tone.
• When the link is placed on a dark background color, use the inverted tone.

Show codeCopy code

A <Link /> can be used on its own as standalone or inline within a sentence or paragraph (default, i.e. standalone = false). This link style only becomes underlined on hover and is typically used separate from sentences and paragraphs.

Show codeCopy code

If no fontSize prop is defined then the link will inherit its parent's font-size. This is useful for inline links where the size of the sentence and link should be equal.

Show codeCopy code

If you need to make the clickable area of the link taller, you can use the paddingY prop which adds equal padding at top and bottom of the link. It accepts any space token. It also supports the responsive prop syntax.

Show codeCopy code

If you're leveraging routing from a framework such as NextJS or React Router, you can globally override all links within your application via the @eds/core context. This override will wrap or replace the default Link with your override. See an example of this at Global link override.

You can use the shouldIgnoreCoreLinkComponent prop when you are using a global link component in <Core /> but there are specific instances where you want to "ignore" the override in order to get a standard <a>-element, usually for infrastructural reasons.

When using a global link override in your <Core /> and you need to pass any prop overrides for a specific instance of a <Link /> in your app (ie not in your <Core />), you can use the providerOverrides prop.

Pass in an object with the props from your chosen routing framework's link component that you wish to override. The example below shows how you can override for example the scroll prop when using next/link, and also how to implement their exported type to make it type-safe.

import { LinkProps as NextLinkProps } from 'next/link';

<Link<Partial<NextLinkProps>>
  providerOverrides={{ scroll: false }}
  href="/customers"
  label="Customers"
/>