Link

A link component that renders a native anchor tag with system styles.

Imports

import { Link } from '@hoverinc/design-system-react-web/react';

Usage

<Link href="#somewhere">Go somewhere</Link>

External Link

<Link href="https://chakra-ui.com" isExternal>
  Chakra <Icon icon={iconExternalLink} isInline size="tiny" ml="50" />
</Link>

Link inline with text

<Body>
  Did you know that&nbsp;
  <Link href="#">links can live inline with text</Link>?
</Body>

Color mode

By default, Link uses the color mode context to determine whether to display a dark or light placeholder animation. Pass colorMode to manually force a color mode.

<HStack spacing="200">
  <Stack padding="300" background="neutral.0" borderRadius="200">
    <Link colorMode="light" href="#">
      Light
    </Link>
  </Stack>
  <Stack padding="300" background="neutral.875" borderRadius="200">
    <Link colorMode="dark" href="#">
      Dark
    </Link>
  </Stack>
</HStack>

Color scheme

The link component defaults to the neutral color scheme but supports semantic color schemes for use on semantic background colors.

<HStack spacing="200">
  <Center padding="300" background="danger.background" borderRadius="200">
    <Link colorScheme="danger" href="#">
      Danger
    </Link>
  </Center>
  <Center padding="300" background="warning.background" borderRadius="200">
    <Link colorScheme="warning" href="#">
      Warning
    </Link>
  </Center>
  <Center padding="300" background="success.background" borderRadius="200">
    <Link colorScheme="success" href="#">
      Success
    </Link>
  </Center>
</HStack>

Disabled state

Links without an href are non-interactive and therefore rendered in a disabled state. When using Link as a button element, set the disabled attribute to disabled it.

<HStack>
  <Link iconBefore={iconLock}>Disabled link</Link>
  <Link as="button" disabled iconBefore={iconLock}>
    Disabled button link
  </Link>
</HStack>

Usage with Routing Library

To use the Link with a routing library like React Router, usually all you need to do is pass the as prop. It'll replace the rendered a tag with React Router's Link.

import { Link } from '@hoverinc/design-system-react-web';
import { Link as RouterLink } from 'react-router';

<Link as={RouterLink} to="/home">
  Home
</Link>;

Usage with Next.js

A separate package is available called @hoverinc/next that provides some system components for use with Next.js.

Note

This packages requires Next.js 13 or later.

First, install the package if you haven't already:

yarn add @hoverinc/next

Then you can use the provided Link component just as you would the design system link and it will automatically hook into Next.js routing.

import { Link } from '@hoverinc/next';

<Link colorScheme="neutral" href="/home">
  Home
</Link>;

Bootstrap

Links get automatically styled by bootstrap

<div class="hstack gap-200">
  <a href="#">This is a link</a>
</div>

IconButton

Link Overlay