Link

Renders an a-element used for navigating to resources defined by the href attribute. Built with Chakra UI Link.

Component usage

import { Link } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Link href="https://www.example.com" target="_blank" rel="noopener noreferrer">
      Visit Example.com
    </Link>
  );
}

⛶

Usage with Routing Library

To use the Link with a routing library like Reach Router or React Router, pass their Link element as the child and set the asChild prop. This will replace the rendered tag with the routing library link.

Do not use the asChild prop to display the Link as something that is not a valid Link element.

import { Link } from "@caspeco/casper-ui-library";
import { Link as ReactRouterLink } from "react-router-dom";

<Link asChild>
  <ReactRouterLink to="/home">Home</ReactRouterLink>
</Link>;