Link

Examples

Link

Code

<Link href="/">
  I'm a link
</Link>

Link as a Button

View standalone

If no href is passed the link will be rendered as a <button> element. The onClick prop can be passed to handle its click behaviour.

Code

<Link onClick={function noRefCheck() {}}>
  I'm a button that looks like a link
</Link>

Link Sizes

View standalone

<Link> supports being rendered at different sizes with the icons changing accordingly. Note that size will be ignored if <Link> is inline.

Code

<Stack
  alignItems="flex-start"
  gap="8px"
>
  <Link size="lg">
    Large
  </Link>
  <Link size="md">
    Medium
  </Link>
  <Link size="sm">
    Small
  </Link>
  <Link size="xs">
    Extra small
  </Link>
  <Link>
    Constant
  </Link>
</Stack>

Inline

View standalone

If the link will sit within a body of copy, you can use inline to indicate this and no accompanying icons will be rendered. Note that the size prop will be ignored if the link is marked as inline so it can blend in with its surrounding copy.

Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our reliance on science and trusted medical information.

Code

<Text>
  Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our{' '}
  <Link
    href="/"
    inline
  >
    reliance on science
  </Link>
  {' '}and trusted medical information.
</Text>

Inline Wrapping

View standalone

An inline link that wraps to multiple lines.

Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our reliance on science and trusted medical information.

Code

<Stack gap="8px">
  <Text>
    Elsevier Health sees a bright future for global health. And it's a future that{' '}
    <Link
      href="/"
      inline
    >
      we're building together. Where we unite in our reliance on science and trusted medical information.
    </Link>
    {' '}
  </Text>
  <Text>
    Elsevier Health sees a bright future for global health. And it's a future that{' '}
    <Link
      external
      href="/"
      inline
    >
      we're building together. Where we unite in our reliance on science and trusted medical information.
    </Link>
    {' '}
  </Text>
</Stack>

External Link

View standalone

<Link> can be marked as "external" to add a visual indication. rel="noopener" will also be automatically added and the icon will come immediately after the last word.

I'm an External Link over multiple lines

Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our inline external link inline external link inline external link inline external link inline external link inline external link and trusted medical information.

Code

<Stack gap="8px">
  <Box
    style={{
      maxInlineSize: '200px'
    }}
  >
    <Link
      external
      href="/"
    >
      I'm an External Link over multiple lines
    </Link>
  </Box>
  <Text>
    Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our{' '}
    <Link
      external
      href="/"
      inline
    >
      inline external link inline external link inline external link inline external link inline external link inline external link
    </Link>
    {' '}and trusted medical information.
  </Text>
</Stack>

Link With Icons

View standalone

startIcon or endIcon can be passed to the <Link> components to add icons before or after the text. You can find a list of the available icons on the icons page. Icons will scale according to the link's sizes, the icons will be vertically centered to link content.

I'm a link with icons I'm a link with icons

Code

<Stack
  alignItems="flex-start"
  gap="8px"
>
  <Link
    endIcon={<ChevronRightIcon />}
    href="/"
    startIcon={<LockOpenIcon />}
  >
    I'm a link with icons
  </Link>
  <Link
    endIcon={<ChevronRightIcon />}
    href="/"
    size="lg"
    startIcon={<LockOpenIcon />}
  >
    I'm a link with icons
  </Link>
</Stack>

External Link With Center Icons

View standalone

A centerIcons boolean can be passed that will take priority over the external prop for centering icons, the icons will be vertically centered to link content.

I'm a link with center-ised icons on multiple lines

Code

<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Link
    centerIcons
    endIcon={<ChevronRightIcon />}
    external
    href="/"
    size="lg"
    startIcon={<ChevronLeftIcon />}
  >
    I'm a link with center-ised icons on multiple lines
  </Link>
</Box>

External Link With Right Aligned End Icon

View standalone

A rightAlignEndIcon boolean can be passed that will take priority over the external prop, the end icon will be vertically aligned to the right of the link content.

I'm a link with a right-aligned end icon

Code

<Box>
  <Link
    endIcon={<ChevronRightIcon />}
    external
    href="/"
    rightAlignEndIcon
    size="lg"
    startIcon={<ChevronLeftIcon />}
  >
    I'm a link with a right-aligned end icon
  </Link>
</Box>

Link Without Icons

View standalone

Pass null as value for endIcon to overwrite the default and don't render an icon.

I'm a link without icons

Code

<Link
  endIcon={null}
  href="/"
>
  I'm a link without icons
</Link>

Multiple Links

View standalone

A more complex example of a group of links horizontally aligned with each other

Return to old experience

Feedback on new experienceTell us what you thinkopens in new tab/window

Code

<Box
  atoms={{
    backgroundColor: 'global-default',
    paddingBlock: '12px'
  }}
  theme="dark"
>
  <Flex
    alignItems="center"
    direction="row"
    gap="4px"
    justifyContent="space-between"
  >
    <Link
      endIcon={null}
      href="/"
      size="xs"
      startIcon={<ChevronLeftIcon />}
    >
      Return to old experience
    </Link>
    <Text size="xs">
      <Box
        as="span"
        atoms={{
          display: {
            desktop: 'inline-block',
            mobile: 'none'
          },
          marginInlineEnd: '4px'
        }}
      >
        Feedback on new experience
      </Box>
      <Link
        href="/"
        inline
        target="_blank"
      >
        Tell us what you think
        <ue>
          opens in new tab/window
        </ue>
      </Link>
    </Text>
  </Flex>
</Box>

Inline Link with End Icon

View standalone

An inline link can also render an endIcon and behave as other links variants.

Download

Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our Download

Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our External Download

Code

<Stack gap="8px">
  <Link
    endIcon={<DownloadIcon />}
    href="/"
    inline
  >
    Download
  </Link>
  <Text>
    Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our{' '}
    <Link
      endIcon={<DownloadIcon />}
      href="/"
      inline
    >
      Download
    </Link>
  </Text>
  <Text>
    Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our{' '}
    <Link
      endIcon={<DownloadIcon />}
      external
      href="/"
      inline
    >
      External Download
    </Link>
  </Text>
</Stack>

Inline Link with End Icon and visually hidden content

View standalone

visuallyHiddenContent can be passed that will add the content inside a <VisuallyHidden> component after the link content.

Code

<Text>
  Elsevier Health sees a bright future for global health. And it's a future that we're building together. Where we unite in our{' '}
  <Link
    endIcon={<DownloadIcon />}
    external
    href="/"
    inline
    visuallyHiddenContent="end icon should never be an orphan inside a line"
  >
    inline external link inline external link inline external link inline external link inline external link inline external link
  </Link>
</Text>

Props

`external`

boolean

Indicates that the link goes to an external site

`centerIcons`

boolean

`visuallyHiddenContent`

ReactNode

If there is any visually hidden content, it should go here rather than in children

`inline`

boolean

Indicates if link is used in line with other text content.

Default: false

`startIcon`

ReactNode

The startIcon property allows an icon to be passed which is displayed before the link text.

`endIcon`

ReactNode

The endIcon property allows an icon to be passed which is displayed after the link text.

`size`

TextSize

The rightAlignEndIcon property allows an icon to be passed which is displayed right aligned after the link text.

`rightAlignEndIcon`

boolean

`atoms`

Applies permitted design system styles. See styling documentation for more.