Link

This component provides a visual cue that indicates interactivity of plain text

Basic Usage

Note: The Link component should always be wrapped inside a Typography component, so that the Link font size and weight will inherit from the font around it.


import { Link } from '@krakentech/coral/atoms';
 
<Typography>
    <Link href="#">This is a link</Link>
</Typography>

This is a link

Properties

color


<Typography>
    <Link href="#" color="dark">
        This is a link
    </Link>
</Typography>
 
<Typography color="error">
    <Link href="#" color="inherit">
        This is a link
    </Link>
</Typography>

This is a link

download


<Typography>
    <Link href="#" download>
        This tells the browser to download rather than redirect
    </Link>
</Typography>

This tells the browser to download rather than redirect

target


<Typography>
    <Link href="#" target="_blank">
        This is a link that opens in a new window
    </Link>
</Typography>

This is a link that opens in a new window

Responsiveness


<Typography>
    <Link href="#" color={{ base: "tertiary500", md: "secondary500" }}>
        This is a link
    </Link>
</Typography>

This is a link

Next.js Typed Routes

LinkProps is generic over the href type, which means you can integrate with Next.js statically typed links by creating a thin wrapper in your app.

First, ensure typedRoutes is enabled in your next.config.ts:


import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
    typedRoutes: true,
};
 
export default nextConfig;

Then create a typed wrapper component in your repository:


import { Link as CoralLink } from '@krakentech/coral/atoms';
import type { LinkProps } from '@krakentech/coral-types';
import type { Route } from 'next';
 
export function Link<T extends string>(props: LinkProps<Route<T>>) {
    return <CoralLink {...props} />;
}

Now TypeScript will validate that href values are valid routes in your application:


import { Link } from '@components/typed-link/Link';
 
// ✅ Valid route — no error
<Link href="/about">About</AppLink>
 
// ❌ Invalid route — TypeScript error
<Link href="/aboot">About</AppLink>
 
// For non-literal strings, cast with as Route
<Link href={('/blog/' + slug) as Route}>Blog Post</AppLink>

Full API

Name	Type	Default
`color`	`ResponsiveVariant<"secondary500" \| "tertiary500" \| "inherit">` A custom link color prop, can be used when a link is used on different background colors.	`tertiary500`
`download`	`boolean` Causes the browser to treat the linked URL as a download
`href`	`string` The URL that the hyperlink points to
`rel`	`string` The relationship of the linked URL as space-separated link types.
`target`	`"_self" \| "_blank" \| "_parent" \| "_top"` Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe)
`type`	`string` Hints at the linked URL’s format with a MIME type
`onClick`	`MouseEventHandler<HTMLAnchorElement \| HTMLButtonElement>` A callback function to be triggered upon clicking the link
`id`	`string` An optional ID to give the link
`role`	`string` An optional role to give the link
`to`	`string` Link href for the router dom link
`ignoreLinkComponent`	`boolean` Ignore any router passed in ThemeProvider and ask this link to inherit normal anchor tag behaviour from the browser	`false`
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`ref`	`Ref<HTMLAnchorElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

Design

Good to know

Choose a link when you want to redirect the user to an external site or to a document, this will usually precede or follow some text e.g “Don’t have an account? Sign up”. It is really important that link copy isn’t super vague, make it specific, clear and friendly.

What is the difference between a button and a link?

The short answer is a button does something and a link goes somewhere. The longer answer, buttons perform an action, should attract users attention and usually encourage conversion. Links should re-direct.

Why are there two colour variations?

Our primary theme is our voltage link, this should be used 99% of the time. Our secondary ink variation is to be used on top of ice.

Component breakdown

Text: Button text
Resting colour: Voltage & Ink
Hover colour: Aquamarine & Blue Tang