Creating a Button Link with Material UI (MUI)

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 this is your first time working with MUI, please follow the installation instructions from the official documentation to get started.

Button Link with an href tag

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

Button Link with a custom component

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>;

Button Link with React Router

In most React applications, we will likely use React Router to navigate between different pages. But because React Router provides a custom Link component, we can’t simply add an href tag if it’s not an MUI component.

To make it work with the router, we will follow the previous approach and add it as a custom component in MUI Button:

import * as React from 'react';
import { Link } from 'react-router-dom';

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

Button Link with an Icon

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 prop 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.

Bye for now 👋