diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 22b335c5c90205..dcb85716b68e47 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -114,6 +114,9 @@ const ButtonGroupRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, }), ...(ownerState.variant === 'text' && ownerState.orientation === 'vertical' && { @@ -122,6 +125,9 @@ const ButtonGroupRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, }), ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && { diff --git a/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js new file mode 100644 index 00000000000000..224d3ccdd2ce45 --- /dev/null +++ b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js @@ -0,0 +1,45 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Box from '@mui/material/Box'; +import ButtonGroup from '@mui/material/ButtonGroup'; + +const buttons = [ + , + , + , +]; + +export default function DisabledButtonGroup() { + return ( + *': { + m: 1, + }, + }} + > + {/* variant="text" */} + + {buttons} + + {/* variant="text" */} + + {buttons} + + + ); +}