Link

A Link navigates the user to a different url.

Simple Link

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>;
}

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>;
}

Link with Icon

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.

Favorite

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>
  );
}

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>
  );
}

Button Styled Link

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

Link

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>
  );
}

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>
  );
}

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>
  );
}