Design System

Link

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

Imports

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

Usage

Loading
Loading
Loading

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.

Loading

Color scheme

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

Loading

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.

Loading

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

Loading

Copyright © 2025 Hover Inc. All Rights Reserved.