## Usage

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](#global-override) below for more details.

## Label and href

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

```tsx live
<Text>
  This is the <Link label="default link" href="#" />.
</Text>
```

## Tone

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.

```tsx live
<Flex flexDirection="column" gap="medium">
  <Link label="Brand (default)" href="#" />
  <Link label="Neutral" href="#" tone="neutral" />
  <Box backgroundColor="neutralInverted">
    <Link label="Inverted" href="#" tone="inverted" />
  </Box>
</Flex>
```

## Standalone

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.

```tsx live
<Flex flexDirection="column" gap="medium">
  <Text as="p">When the link is separated from a sentence, use the standalone style.</Text>
  <Link label="Standalone link" href="#" standalone />

  <Divider />

  <Text as="p">
    {'When part of a sentence, use the default '}
    <Link label="inline link" href="#" />
    {' style.'}
  </Text>
</Flex>
```

## Font size

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.

```tsx live
<Flex flexDirection="column" gap="medium">
  <Text fontSize="large">
    Large text with <Link label="link that inherits font size" href="#" />.
  </Text>

  <Text fontSize="large">
    <Link label="Link with standard font size" href="#" fontSize="standard" />
  </Text>
</Flex>
```

## Vertical padding

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](/foundations/responsive-layouts/#responsive-prop-syntax).

```tsx live
<Link paddingY="medium" label="Hover over me to see my tall click area" href="#" />
```

## Link-styled button

Use the `<TextButton />` component when you want a button (`<button>`) with the visual appearance of a Link. You should use a TextButton instead of a Link when the element needs to trigger an action (like opening a modal or popover) rather than performing navigation, like linking to another page.

```tsx live
const PopoverContent = () => (
  <Flex justifyContent="space-between" alignItems="center" gap="small">
    <Text>Popover content</Text>
    <PopoverClose>
      <Button label="Close" iconOnly tone="ghost" icon={CloseIcon} size="small" />
    </PopoverClose>
  </Flex>
);

return (
  <Popover content={<PopoverContent />}>
    <TextButton label="Toggle popover" />
  </Popover>
);
```

## Button-styled link

Use the [`<ButtonLink />`](/packages/button#button-styled-link) component when you want a link (`<a>`) with the visual appearance of a Button. You should use a ButtonLink instead of a Link when the element needs to look like a button but still behave like a link—such as navigating to a different page or section.

This component is part of the [`@eds/button`](/packages/button/) package and shares most of its styling and prop logic with the [`Button`](/packages/button/) component.

## Global override

If you're leveraging routing from a framework such as [NextJS](https://nextjs.org/docs/api-reference/next/link) or [React Router](https://reactrouter.com/docs/en/v6/components/link), 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](/packages/core#global-link-override).

### Ignore global link component

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.

### Provider overrides

When using a [global link override](/packages/core/#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.

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

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

Links are used as both internal and external navigational elements.

Link

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources