Muhi Logo Text
Work With MeAboutTestimonialsBlog

Creating 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 December 17, 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 this is your first time working with MUI, please follow the installation instructions from the 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>;

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

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 👋

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create padding, margin, and grid spacing with theme customization using Material UI (MUI).

react
mui

Discussion

Upskill Your Frontend Development Techniques 🌟

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

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

© 2023, Muhi Masri