Link

This component extends the <a> HTML element (or anchor element) and is used to display hyperlinks.

Import

import { Link } from "@govtechmy/myds-react/link";

Anatomy

export default () => (
  <Link href="/" primary>
    {/* The link's destination should be indicated here. */}
    Malaysia's Official Design System
  </Link>
);

Examples

Using asChild for Custom Links

If you need to use the Link component provided by a different package, you can use the asChild prop and wrap the component. Here's an example using Next.js:

Custom Link

You can also create a custom component and import it as needed:

import { Link as LinkPrimitive } from "@govtechmy/myds-react/link";
import NextLink from "next/link";
 
export const Link = (props) => (
  <LinkPrimitive asChild>
    <NextLink {...props} />
  </LinkPrimitive>
);