diff --git a/docs/data/joy/components/button/button-pt.md b/docs/data/joy/components/button/button-pt.md
index 63b55131073f76..c30b0b2397c484 100644
--- a/docs/data/joy/components/button/button-pt.md
+++ b/docs/data/joy/components/button/button-pt.md
@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
{{"demo": "ButtonDisabled.js"}}
-### With icons
+### With decorators
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
{{"demo": "ButtonIcons.js"}}
diff --git a/docs/data/joy/components/button/button-zh.md b/docs/data/joy/components/button/button-zh.md
index 63b55131073f76..c30b0b2397c484 100644
--- a/docs/data/joy/components/button/button-zh.md
+++ b/docs/data/joy/components/button/button-zh.md
@@ -54,9 +54,9 @@ Use the `disabled` prop to disable interaction and focus.
{{"demo": "ButtonDisabled.js"}}
-### With icons
+### With decorators
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
{{"demo": "ButtonIcons.js"}}
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index 884574d0407f3b..4744eed5b33def 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -64,9 +64,9 @@ Use the `disabled` prop to disable interaction and focus.
{{"demo": "ButtonDisabled.js"}}
-### With icons
+### With decorators
-Use the `startIcon` and/or `endIcon` props to add supporting icons to the button.
+Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
{{"demo": "ButtonIcons.js"}}
diff --git a/packages/mui-joy/src/Button/Button.spec.tsx b/packages/mui-joy/src/Button/Button.spec.tsx
index fd790cdec0e5c8..275d22749aae21 100644
--- a/packages/mui-joy/src/Button/Button.spec.tsx
+++ b/packages/mui-joy/src/Button/Button.spec.tsx
@@ -73,14 +73,14 @@ function Icon() {
}
+ endDecorator={}
sx={{ width: 'var(--Button-minHeight)' }}
>
;
-} size="sm">
+} size="sm">
Add to cart
;
-} color="success">
+} color="success">
Checkout
;
diff --git a/packages/mui-joy/src/Button/Button.test.js b/packages/mui-joy/src/Button/Button.test.js
index a328049f60a285..65b7c3a3b35e07 100644
--- a/packages/mui-joy/src/Button/Button.test.js
+++ b/packages/mui-joy/src/Button/Button.test.js
@@ -7,13 +7,13 @@ import { ThemeProvider } from '@mui/joy/styles';
describe('Joy ', () => {
const { render } = createRenderer();
- describeConformance(, () => ({
+ describeConformance(, () => ({
render,
classes,
ThemeProvider,
refInstanceof: window.HTMLButtonElement,
muiName: 'JoyButton',
- testDeepOverrides: { slotName: 'startIcon', slotClassName: classes.startIcon },
+ testDeepOverrides: { slotName: 'startDecorator', slotClassName: classes.startDecorator },
testVariantProps: { variant: 'solid', fullWidth: true },
testCustomVariant: true,
skip: ['propsSpread', 'componentsProp', 'classesRoot'],
@@ -76,21 +76,21 @@ describe('Joy ', () => {
expect(button).to.have.class(classes.fullWidth);
});
- it('should render a button with startIcon', () => {
- const { getByRole } = render();
+ it('should render a button with startDecorator', () => {
+ const { getByRole } = render();
const button = getByRole('button');
- const startIcon = button.querySelector(`.${classes.startIcon}`);
+ const startDecorator = button.querySelector(`.${classes.startDecorator}`);
expect(button).to.have.class(classes.root);
- expect(startIcon).not.to.have.class(classes.endIcon);
+ expect(startDecorator).not.to.have.class(classes.endDecorator);
});
- it('should render a button with endIcon', () => {
- const { getByRole } = render();
+ it('should render a button with endDecorator', () => {
+ const { getByRole } = render();
const button = getByRole('button');
- const endIcon = button.querySelector(`.${classes.endIcon}`);
+ const endDecorator = button.querySelector(`.${classes.endDecorator}`);
expect(button).to.have.class(classes.root);
- expect(endIcon).not.to.have.class(classes.startIcon);
+ expect(endDecorator).not.to.have.class(classes.startDecorator);
});
});