Blueprint

GuidesFoundationComponentsReleases
⌘K

Link

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

Imports


import { Link } from '@hover/blueprint/react';

Usage

live

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

live

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

Link inline with text

live

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

Color scheme

The link component supports standard system color schemes.

live

<HStack>
<Link colorScheme="danger" href="#">
Danger
</Link>
<Link colorScheme="warning" href="#">
Warning
</Link>
<Link colorScheme="primary" href="#">
Primary
</Link>
<Link colorScheme="neutral" href="#">
Neutral
</Link>
</HStack>

Next theme

With the new visual design that the /next theme supports, links are often displayed without the primary color scheme applied. Set colorScheme to neutral to achieve this.

live

<Link colorScheme="neutral" href="#">
Next
</Link>

If you need the link to stand out as a call-to-action inline with text of the same color, pass isUnderlined.

live

<Body>
Here's some text with a&nbsp;
<Link colorScheme="neutral" isUnderlined href="#">
neutral link
</Link>&nbsp;
in it.
</Body>

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 '@hover/blueprint';
import { Link as RouterLink } from 'react-router';
<Link as={RouterLink} to="/home">
Home
</Link>;

Usage with Next.js

A separate package is available called @hover/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 @hover/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 '@hover/next';
<Link colorScheme="neutral" href="/home">
Home
</Link>;