Link
A link component that renders a native anchor tag with system styles.
Imports
import { Link } from '@hover/blueprint/react';
Usage
External Link
Link inline with text
Color scheme
The link component supports standard system color schemes.
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.
If you need the link to stand out as a call-to-action inline with text of the
same color, pass isUnderlined.
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.
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>;