Link

Used to provide accessible navigation.

Demo

React

Normal link

Active link

Visited link

Vue

Normal link

Active link

Visited link

Usage

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	Whether to render the link as a child component

Vue

Name	Type	Required	Default	Description
href	string	Yes	value	The URL to navigate to
as-child	boolean		false	Whether to render the link as a child component