The link component is fairly new for react-md and I'm still trying to figure out some reasonable defaults for it. You will most likely want to change the following scss variables for your app:

• $rmd-link-color
• $rmd-link-hover-color
• $rmd-link-visited-color

You can also render the Link component using a third-party link/routing library. Popular examples are:

• react-router
• @reach/router
• next.js

Since this documentation site is using next.js, I won't have a live example here for using react-router, but you can view the source code or open the code sandbox link to see how other libraries can work with it.

If you are using react-router, you can use the component prop to render as the Link from react-router and provide all the react-router link specific props into the react-md Link:

import { ReactElement } from "react";
import { render } from "react-dom";
import { Link as ReactRouterLink, LinkProps } from "react-router-dom";
import { Link as ReactMDLink } from "@react-md/link";

function Link(props: LinkProps): ReactElement {
  return <ReactMDLink component={ReactRouterLink} {...props} />;
}

function App(): ReactElement {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/login">Login</Link>
    </div>
  );
}

render(<App />, document.getElementById("root"));

The Link component also has some built-in "security" around opening links with target="_blank". Whenever a link is updated to have target="_blank", it will automatically add a rel="noopener norefferer" attribute as well. You can check out this link for some more details about this risk.

The link can be used alongside icons as well if needed. For accessibility concerns, you'll need to either update the icon with different roles, or aria attributes.

Since there will be times where you'd like a link to have button styles, you can use the buttonThemeClassNames export from @react-md/button to style a link as a button.