Link

This component is a wrapper around the <a> tag. By default, we remove all styles from the default <a> tag. You can use this component to create links with styles like link color.

Properties

Name

Default

Description

color

link

The color of the link. One of:

link
accent
text

underline

true

Whether the link should be underlined.

All additional props you pass to this component will be passed to the <a> tag.

Examples

<Link href="/" color="link">Link</Link>
<Link href="/" color="accent">Accent Link</Link>
<Link href="/" color="text">Text Link</Link>
<Link href="/" color="link" underline={false}>No underline</Link>

Link Accent Link Text Link No underline

Slots

Start Slot

<Link href="/"><IconHouse slot="start" />Home</Link>
<Link href="/" underline={false}><IconHouse slot="start" />Home</Link>

Home Home

End Slot

<Link href="/" target="_blank">
    Open
    <IconBoxArrowUpRight slot="end" />
</Link>
<Link href="/" target="_blank" underline={false} >
    Open
    <IconBoxArrowUpRight slot="end" />
</Link>

Open Open