Muhi Masri

How to Create a Button Link with Material UI (MUI)

Learn how to make a MUI Button behave like a Link with Material UI and React

Last updated on November 20, 2022

react
mui
MUI Button Link

In many scenarios, we often want a button to behave like a link but still look like a button, especially when we need to change the page or use other Anchor element properties.

Luckily, we can easily do this with the MUI Button component while keeping all the existing styles and functionality intact!

If you’d like to skip all the details, below is the complete code example:

If you’re starting with MUI and haven’t worked with it before, please follow the installation instructions from MUI’s official documentation to get started

Adding the href prop to the Button component will automatically change it to a Link component, an Anchor tag element.

import * as React from 'react';
import { Button } from '@mui/material';

export default function App() {
  return <Button href="/new-page">MUI Link Button</Button>;
}

The cool part is that MUI will allow us to use both the Button’s and Link’s API. So we can add a target prop that belongs to the Link component and still use the Button’s variant prop, like “outlined” or “contained”.

import * as React from 'react';
import { Button } from '@mui/material';

export default function App() {
  return <Button href="/new-page" target="_blank" variant="outlined">MUI Link Button</Button>;
}

If we’d like to use a third-party Link component or use our custom one, we can pass it in the component prop as follows:

import * as React from 'react';
import { Button, Stack } from '@mui/material';

export default function App() {
  return (
    <Button href="/new-page" component={CustomLink} variant="outlined">
      Custom Link Button
    </Button>
  );
}

const CustomLink = (props) => <a {...props}>{props.children}</a>;

Creating an icon button as a Link is very useful as well. For example, we can have social links as buttons that need to redirect to a new page or use the Mailto link to open the default email. Similar to the first approach, all we need is to add the href tag to the IconButton component:

import * as React from 'react';
import { IconButton } from '@mui/material';
import GitHubIcon from '@mui/icons-material/GitHub';
import EmailIcon from '@mui/icons-material/Email';

export default function App() {
  return (
    <div>
      <IconButton href="https://github.com/muhimasri" target="_blank">
        <GitHubIcon />
      </IconButton>
      <IconButton href="mailto:fakeuser@fakeemail.com">
        <EmailIcon />
      </IconButton>
    </div>
  );
}

Alternatively, we can use a normal button with an icon:

<Button href="/new-page" variant="outlined" startIcon={<LaunchIcon />}>
  Icon Button
</Button>

Summary

Most MUI components support the component prop, which replaces the HTML element with a more suitable one. Still, we have a simplified approach with a Button component by only adding the href tag. It will transform into a Button Link automatically.

I hope you enjoyed learning from this tutorial and if you have any questions, please leave a comment below.

Bye for now!

Recommended Reading

Learn how Material UI container width works including two simple techniques for customizing and overriding the container width

react
mui

Discussion

Master your front-end development techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development articles straight to your inbox!

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2022, Muhi Masri