Sometimes, we want to make a React Material UI Raised Button link to an external URL.

In this article, we’ll look at how to make a React Material UI Raised Button link to an external URL.

How to make a React Material UI Raised Button link to an external URL?

To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained.

Then we set the href prop of the button to the URL we want to go to.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
export default function App() {
  return (
    <div>
      <Button variant="contained" href="https://yahoo.com">
        Yahoo
      </Button>
    </div>
  );
}

to add a Button with the variant prop set to 'contained' to add a raised button.

And we set the href prop to 'https://yahoo.com' to make the button go to https://yahoo.com when we click it.

Conclusion

To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained.

Then we set the href prop of the button to the URL we want to go to.