Link

Links allow users to navigate to a different location.

Basic usage

Spendesk

<Link href="https://spendesk.com" isExternal>
  Spendesk
</Link>

Routing library

The as prop is used to support a custom component, such as a react-router or Next.js link.

import { Link as NextLink } from "next/link";

const Demo = () => {
  return (
    <Link as={NextLink} href="/docs/components/button">
      Button
    </Link>
  );
};

import { Link as ReactRouterLink } from "react-router-dom";

const Demo = () => {
  return (
    <Link as={ReactRouterLink} to="/help">
      Click Me
    </Link>
  );
};

Inside a Callout

The Link component can be used inside other components, such as a Callout.

<Callout
  variant="warning"
  title={
    <p className="m-0">
      You need to activate cost centers to enable Purchase Orders.{" "}
      <Link href="https://spendesk.com" isExternal>
        Activate cost centers
      </Link>
    </p>
  }
/>