Link

Takes the reader to another page, a file or another part of the same page, from within a sentence or on its own.

<script setup lang="ts">
import { FsLink } from '@fivespark/ui'
</script>

<template>
  <p class="type-body">
    Bekijk de <FsLink to="/offertes/2026-041">offerte voor Bouwbedrijf Jansen</FsLink> voordat je hem verstuurt.
  </p>
</template>

Usage

<script setup lang="ts">
import { FsLink } from '@fivespark/ui'
</script>

<template>
  <FsLink to="/offertes">Alle offertes</FsLink>
</template>

to goes through your app's link component, such as NuxtLink; href is always a plain <a>. A link needs one of them. It takes the colour and size of the text around it. In a sentence, link only the words that say where it goes, leave the full stop outside, and never write "klik hier" or "lees meer". Navigation that should look like a button is Button with to.

Examples

Opening in a new tab

newTab adds an icon and a hidden "opens in a new tab" for screen readers. Keep it for leaving the app or a task with unsaved work, and for files.

<script setup lang="ts">
import { FsLink } from '@fivespark/ui'
</script>

<template>
  <p class="type-body">
    Lees de <FsLink href="https://www.rijksoverheid.nl/" new-tab>regels voor het btw-tarief</FsLink> bij de Rijksoverheid.
  </p>
</template>

Download

Say the file type and size in the text.

<script setup lang="ts">
import { FsLink } from '@fivespark/ui'
</script>

<template>
  <FsLink href="/bestanden/algemene-voorwaarden.pdf" download>Algemene voorwaarden (PDF, 240 kB)</FsLink>
</template>

On its own

Same destination, same text; different destinations, different text.

<script setup lang="ts">
import { FsLink } from '@fivespark/ui'
</script>

<template>
  <ul class="type-body flex flex-col gap-1">
    <li><FsLink to="/offertes">Alle offertes</FsLink></li>
    <li><FsLink to="/orders">Openstaande orders</FsLink></li>
    <li><FsLink to="/planning">Planning van deze week</FsLink></li>
  </ul>
</template>

Keyboard

Key	Does
Enter	Follows the link

API Reference

FsLink

Prop	Type	Default	Description
to	string | object		Navigates, through the app's link component or a plain `<a>`. A route object needs a link component.
href	string		Navigates with a plain `<a>`: another site, or a file.
newTab	boolean	false	Opens a new tab, with an icon and hidden text that say so. For a file, another site, or leaving unsaved work.
newTabText	string		Replaces the hidden new-tab text, "(opent in een nieuwe tab)" or "(opens in a new tab)".

Slot	Props	Description
default	any	The link's text.