diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index d3876a083f15c3..a15dfb0133430b 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -417,7 +417,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
const clickable = clickableProp !== false && onClick ? true : clickableProp;
const small = size === 'small';
- const component = ComponentProp || (clickable || onDelete ? ButtonBase : 'div');
+ const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
const styleProps = {
...props,
@@ -435,7 +435,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
const moreProps =
component === ButtonBase
? {
- component: 'div',
+ component: ComponentProp || 'div',
focusVisibleClassName: classes.focusVisible,
disableRipple: Boolean(onDelete),
}
diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index 297c6b83ab72ad..30556488a819de 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/packages/material-ui/src/Chip/Chip.test.js
@@ -84,6 +84,13 @@ describe('', () => {
expect(button).toHaveAccessibleName('My Chip');
});
+ it('should render link with the button base', () => {
+ const { container } = render();
+
+ expect(container.firstChild).to.have.class('MuiButtonBase-root');
+ expect(container.firstChild).to.have.tagName('a');
+ });
+
it('should apply user value of tabIndex', () => {
const { getByRole } = render( {}} tabIndex={5} />);