Material UI ButtonGroup breaks when adding href to Button

Question

Everything is in the title. Here is the CodeSandbox with reproduction !

When using MUI's ButtonGroup, the layout is fine with three "regular" buttons:

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Result:

But as soon as we add an href to one of the buttons, it breaks the layout, like so:

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button href="test.com">One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Result:

Is there any way to fix this ? I don't want to have to use the trick of onClick and location.replace or location.href...

Also, maybe I should post this as an issue on MUI's GitHub? I'm guessing only if it is relevant and not fixable, but there are so many I doubt they would see it.

Answer 1

Use the prop LinkComponent="button":

import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

export default function BasicButtonGroup() {
  return (
    <ButtonGroup variant="contained" aria-label="outlined primary button group">
      <Button LinkComponent="button" href="test.com">
        One
      </Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

Demo: https://codesandbox.io/s/basicbuttongroup-material-demo-forked-43pmhn?file=/demo.js:0-430