Skip to main content
react-md
react-md - Link - Demos

Simple Examples

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-visitied-color

You can also render links within paragraphs or the <Text />component. So here is a link to GitHub again to show how it looks.

Third Party Routing Libraries

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

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:

12345678910111213141516171819import React, { ReactElement } from "react";
import { render } from "react-dom";
import { Link as ReactRouterLink, LinkProps } from "react-router";
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"));

Malicious Target

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.

This link to google.com will be updated to prevent malicious scripts from Google, while this link to w3.org will not.

With Icons

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.

With Button Styles

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