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>

Slots

Start Slot

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

End Slot

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