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';
 
<Typography>
    <Link href="#">This is a link</Link>
</Typography>

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>

download

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

target

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

Responsiveness

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

Full API

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