Skip to main content
react-md

Link

A Link navigates the user to a different url.

import { Link } from "@react-md/core/link/Link";
import { type ReactElement } from "react";

export default function SimpleLinkExample(): ReactElement {
  return <Link href="https://react-md.dev">react-md.dev</Link>;
}

Press Enter to start editing.

If a link contains an icon, it can be centered vertically by enabling the flex prop. Just note that links will no longer correctly line wrap while rendered within paragraphs of text if this is enabled.

import { Link } from "@react-md/core/link/Link";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function LinkWithIconExample(): ReactElement {
  return (
    <Link href="#" flex>
      <FavoriteIcon />
      Favorite
    </Link>
  );
}

Press Enter to start editing.

To create a link that appears like a button, use the button styling utility function.

import { button } from "@react-md/core/button/styles";
import { cssUtils } from "@react-md/core/cssUtils";
import { type ReactElement } from "react";

export default function ButtonStyledLinkExample(): ReactElement {
  return (
    <a
      href="https://react-md.dev"
      className={button({
        className: cssUtils({
          textDecoration: "none",
        }),
        theme: "primary",
        themeType: "outline",
      })}
    >
      Link
    </a>
  );
}

Press Enter to start editing.

Third-party Routing Libraries

If your application uses Next.js, react-router, @reach/router, or some other framework for routing, do not use the Link component from react-md. Instead, use the link styling utility function if the link styles are required.

This example will show how to apply it to Next.js.

import { link } from "@react-md/core/link/styles";
import Link from "next/link.js";
import { type ReactElement } from "react";

export default function ThirdPartyRoutingLibrariesExample(): ReactElement {
  return (
    <Link
      href="https://nextjs.org"
      className={link()}
      // className={link({
      //   flex: true,
      //   className: "",
      // })}
    >
      Next.js
    </Link>
  );
}