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
  • inherit
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="inherit">Inherit Link</Link>
<Link href="/" color="link" underline={false}>No underline</Link>
Link Accent Link Text Link Inherit Link No underline

Slots

Start Slot

<Link href="/">
    {#snippet start()}
        <IconHouse />
    {/snippet}
    Home
</Link>
<Link href="/" underline={false}>
    {#snippet start()}
        <IconHouse />
    {/snippet}
    Home
</Link>
Home Home

End Slot

<Link href="/" target="_blank">
    Open
    {#snippet end()}
        <IconBoxArrowUpRight />
    {/snippet}
</Link>
<Link href="/" target="_blank" underline={false}>
    Open
    {#snippet end()}
        <IconBoxArrowUpRight />
    {/snippet}
</Link>
Open Open