Balance Logo
Balance
Reckon Design System

Next Link

An alternative API for Next links that enforces the usage of an anchor
Install
pnpm add @reckon-web/next-link
Import usage
import {
NextLink
} from '@reckon-web/next-link';
  • Code
  • API

Next's Link makes it easy to create "links" that don't actually use anchors so we provide a link component with a slightly different API that forces the usage of an anchor tag. You should always use the components in this package instead of Next's Link. This is enforced in reckon-frontend with a lint rule.

Instead of adding event handlers and sometimes an href to the child element, Reckon's NextLink renders an anchor itself.

import { NextLink } from '@reckon-web/next-link';
function MyComponent() {
return <NextLink href="/">A Next link</NextLink>;
}

Button

You can pass the NextLink to the as prop on a Button to make a link that looks like a button.

import { NextLink } from '@reckon-web/next-link';
import { Button } from '@reckon-web/button';
function MyComponent() {
return (
<Button as={NextLink} href="/" label="A link that looks like a button" />
);
}

You can pass the NextLink to the as prop on a TextLink to make a link that looks correct in text.

import { NextLink } from '@reckon-web/next-link';
import { TextLink } from '@reckon-web/text';
function MyComponent() {
return (
<TextLink as={NextLink} href="/">
A link
</TextLink>
);
}
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.