Link

Used to provide accessible navigation.

Demo

React

Normal link

Active link

Visited link

Vue

Normal link

Active link

Visited link

Example

React

import { Link } from '@fintech-sandpit/ui/react';

return (
  <Link href="/">
    Home
  </Link>
);

import { Link } from '@fintech-sandpit/ui/react';
import NextLink from 'next/link';

return (
  <Link asChild>
    <NextLink href="/">
      Home
    </NextLink>
  </Link>
);

Vue

<script setup lang="ts">
import { Link } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Link href="/">
    Home
  </Link>
</template>

<script setup lang="ts">
import { Link } from '@fintech-sandpit/ui/vue';
import { RouterLink } from 'vue-router';
</script>

<template>
  <Link as-child>
    <RouterLink href="/">
      Home
    </RouterLink>
  </Link>
</template>

Props

React

Name	Type	Required	Default	Description
href	string	Yes	value	The URL to navigate to
asChild	boolean		false	Use the provided child element as the default rendered element, combining their props and behavior

Vue

Name	Type	Required	Default	Description
href	string	Yes	value	The URL to navigate to
as-child	boolean		false	Use the provided child element as the default rendered element, combining their props and behavior