Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ButtonGroup] Breaking when adding href to Button

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When using MUI’s ButtonGroup, 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:

Expected behavior 🤔

Steps to reproduce 🕹

Steps:

Using MUI’s ButtonGroup, like so:

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

Adding href to one of the buttons

Context 🔦

No response

Your environment 🌎

Using BraveBrowser Version 1.35.104 Chromium: 98.0.4758.109 (Build officiel) (x86_64)

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 17.5.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.8.1 => 11.8.1 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.69 
    @mui/icons-material: ^5.4.2 => 5.4.2 
    @mui/material: ^5.4.3 => 5.4.3 
    @mui/private-theming:  5.4.2 
    @mui/styled-engine:  5.4.2 
    @mui/styles: ^5.4.2 => 5.4.2 
    @mui/system:  5.4.3 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.2 
    @types/react:  17.0.39 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2