Link

VLink is a native link painted in a tone. It takes the size and weight of the text around it, in a sentence, a heading or a caption.

Usage

vue

Read the installation guide before adding the package to your project.

<script setup lang="ts">
import { VLink, VTypography } from 'vectis-ui'
</script>

<template>
  <VTypography>
    Read the <VLink href="#usage">installation guide</VLink> before adding the package to your
    project.
  </VTypography>
</template>

Examples

Tones

tone paints the link. neutral takes the colour of the text.

vue

Accent
Neutral
Delete account
View receipt
Review settings

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <ul class="links">
    <li><VLink href="#tones">Accent</VLink></li>
    <li><VLink href="#tones" tone="neutral">Neutral</VLink></li>
    <li><VLink href="#tones" tone="danger">Delete account</VLink></li>
    <li><VLink href="#tones" tone="success">View receipt</VLink></li>
    <li><VLink href="#tones" tone="warning">Review settings</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Inherited colour

tone="inherit" takes the colour of the text around the link, such as a muted footer line, and turns to the accent on hover. Keep the underline on: it is then what tells the link apart.

vue

Built with Vectis UI and Nuxt.

<script setup lang="ts">
import { VLink, VTypography } from 'vectis-ui'
</script>

<template>
  <VTypography variant="body-sm" tone="muted">
    Built with <VLink href="#inherited-colour" tone="inherit">Vectis UI</VLink> and
    <VLink href="#inherited-colour" tone="inherit">Nuxt</VLink>.
  </VTypography>
</template>

Underline

Links are always underlined by default, so that colour alone does not tell them apart in running text. hover and none suit menus, footers and lists of links.

vue

Always underlined
Underlined on hover
Never underlined

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <ul class="links">
    <li><VLink href="#underline">Always underlined</VLink></li>
    <li><VLink href="#underline" underline="hover">Underlined on hover</VLink></li>
    <li><VLink href="#underline" underline="none">Never underlined</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

External links

external opens a new tab with rel="noopener noreferrer", adds an icon and tells screen readers. The icon is the built-in open_in_new, which an icon resolver can replace everywhere. externalIcon replaces it for one link and hideExternalIcon removes it.

vue

<script setup lang="ts">
import { VLink } from 'vectis-ui'
import { description } from 'vectis-ui/icons'
</script>

<template>
  <ul class="links">
    <li><VLink href="https://vuejs.org" external>Vue documentation</VLink></li>
    <li>
      <VLink href="https://vuejs.org" external :external-icon="description">Another icon</VLink>
    </li>
    <li><VLink href="https://vuejs.org" external hide-external-icon>Without the icon</VLink></li>
  </ul>
</template>

<style scoped>
.links {
  display: grid;
  gap: var(--vectis-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>

Disabled

A disabled link loses its address and its click listeners, and is marked aria-disabled.

vue

Archived release notes

<script setup lang="ts">
import { VLink } from 'vectis-ui'
</script>

<template>
  <VLink href="#disabled" disabled>Archived release notes</VLink>
</template>

Router

VLink always renders a real <a>. With Nuxt or Vue Router, render it inside the router link in custom mode and pass on href and navigate. A click with a modifier key still opens a new tab.

vue

<RouterLink v-slot="{ href, navigate }" to="/settings" custom>
  <VLink :href="href" @click="navigate">Settings</VLink>
</RouterLink>

API

Props

Prop	Type	Default
`href`	`string`	none
Link destination.
`tone`	`LinkTone'accent' \| 'neutral' \| 'danger' \| 'success' \| 'warning' \| 'inherit'`	`'accent'`
Link colour. `inherit` takes the parent colour and turns to the accent on hover.
`underline`	`LinkUnderline'always' \| 'hover' \| 'none'`	`'always'`
When the link is underlined. Keep `always` inside running text.
`external`	`boolean`	`false`
Opens a new tab with `rel="noopener noreferrer"`, adds an icon and tells screen readers.
`externalIcon`	`IconSource`	`open_in_new`
Icon of an external link.
`hideExternalIcon`	`boolean`	`false`
Removes the icon of an external link. Screen readers still hear that it opens a new tab.
`disabled`	`boolean`	`false`
Removes the address and marks the link `aria-disabled`.

Slots

Slot	Type
`default`	`{}`
Link text.

Types

Types used in the API tables. Import exported types from vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender