Link

Used to provide accessible navigation.

Demo

React

Normal link

Active link

Visited link

Vue

Normal link

Active link

Visited link

Example

React

// Import component
import { Link } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/link.css';

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

// Import component
import { Link } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/link.css';
// Import Next.js link
import NextLink from 'next/link';

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

Vue

<script setup lang="ts">
// Import component
import { Link } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/link.css';
</script>

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

<script setup lang="ts">
// Import component
import { Link } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/link.css';
// Import Vue Router link
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