React MUI 5 a href link Example

In this tutorial, we will how to use a href link in react with material ui (mui 5). We will see a href link, and a href link button, example with react material UI 5.

Install & Setup Vite + React + Typescript + MUI 5

React Material UI 5 a href link Example

1. react mui 5 simple a href link component.

import { Link, Stack } from "@mui/material";

export default function App() {
  return (
    <>
      <Stack direction="row" spacing={4}>
        <Link href="#">Link</Link>
        <Link href="#" color="inherit">
          {'color="inherit"'}
        </Link>
        <Link href="#" variant="button">
          {'variant="body2"'}
        </Link>
      </Stack>
    </>
  );
}

mui 5 a href link

2. react mui 5 href link component with underline link, hover link, underline always & none link.

import { Link, Stack } from "@mui/material";

export default function App() {
  return (
    <>
      <Stack direction="row" spacing={4}>
        <Link href="#" underline="none">
          {'underline="none"'}
        </Link>
        <Link href="#" underline="hover">
          {'underline="hover"'}
        </Link>
        <Link href="#" underline="always">
          {'underline="always"'}
        </Link>
      </Stack>
    </>
  );
}

mui 5 href link underline

3. react mui 5 href link component with button.

import { Link, Stack } from "@mui/material";

export default function App() {
  return (
    <>
      <Stack direction="row" spacing={4}>
        <Link
          component="button"
          variant="body2"
          onClick={() => {
            console.info("I'm a button.");
          }}
        >
          Button Link
        </Link>
        <Link
          component="button"
          variant="button"
          onClick={() => {
            console.info("I'm a button.");
          }}
        >
          Button Link
        </Link>
      </Stack>
    </>
  );
}

4. react mui 5 href link with target link.

import { Link } from "@mui/material";

export default function App() {
  return (
    <>
      <Link
        href="https://mui.com/material-ui/react-link/"
        target="_blank"
        rel="noopener"
      >
        {"Target Links"}
      </Link>
    </>
  );
}

mui 5 target link