Link
A link component that renders a native anchor tag with system styles.
Imports
import { Link } from '@hoverinc/design-system-react-web/react';
Usage
External Link
Link inline with text
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.
Color scheme
The link component defaults to the neutral color scheme but supports semantic
color schemes for use on semantic background colors.
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.
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.
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>;