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