;
@@ -245,9 +250,9 @@ Button.propTypes /* remove-proptypes */ = {
* @default {}
*/
componentsProps: PropTypes.shape({
- endIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
- startIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
/**
* If `true`, the component is disabled.
@@ -257,7 +262,7 @@ Button.propTypes /* remove-proptypes */ = {
/**
* Element placed after the children.
*/
- endIcon: PropTypes.node,
+ endDecorator: PropTypes.node,
/**
* @ignore
*/
@@ -277,7 +282,7 @@ Button.propTypes /* remove-proptypes */ = {
/**
* Element placed before the children.
*/
- startIcon: PropTypes.node,
+ startDecorator: PropTypes.node,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts
index 13e58ff4e2dfca..b1a5a2c25765be 100644
--- a/packages/mui-joy/src/Button/ButtonProps.ts
+++ b/packages/mui-joy/src/Button/ButtonProps.ts
@@ -8,7 +8,7 @@ import {
import { SlotComponentProps } from '@mui/base/utils';
import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
-export type ButtonSlot = 'root' | 'startIcon' | 'endIcon';
+export type ButtonSlot = 'root' | 'startDecorator' | 'endDecorator';
export interface ButtonPropsVariantOverrides {}
@@ -18,8 +18,8 @@ export interface ButtonPropsSizeOverrides {}
interface ComponentsProps {
root?: SlotComponentProps<'button', { sx?: SxProps }, ButtonOwnerState>;
- startIcon?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
- endIcon?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
+ startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
+ endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
}
export interface ButtonTypeMap {
@@ -48,7 +48,7 @@ export interface ButtonTypeMap
{
/**
* Element placed after the children.
*/
- endIcon?: React.ReactNode;
+ endDecorator?: React.ReactNode;
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
@@ -70,7 +70,7 @@ export interface ButtonTypeMap
{
/**
* Element placed before the children.
*/
- startIcon?: React.ReactNode;
+ startDecorator?: React.ReactNode;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
diff --git a/packages/mui-joy/src/Button/buttonClasses.ts b/packages/mui-joy/src/Button/buttonClasses.ts
index 6f72ab08ef4961..fe84b0fce52a72 100644
--- a/packages/mui-joy/src/Button/buttonClasses.ts
+++ b/packages/mui-joy/src/Button/buttonClasses.ts
@@ -35,10 +35,10 @@ export interface ButtonClasses {
sizeLg: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: string;
- /** Styles applied to the startIcon element if supplied. */
- startIcon: string;
- /** Styles applied to the endIcon element if supplied. */
- endIcon: string;
+ /** Styles applied to the startDecorator element if supplied. */
+ startDecorator: string;
+ /** Styles applied to the endDecorator element if supplied. */
+ endDecorator: string;
}
export type ButtonClassKey = keyof ButtonClasses;
@@ -65,8 +65,8 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('JoyButton', [
'sizeMd',
'sizeLg',
'fullWidth',
- 'startIcon',
- 'endIcon',
+ 'startDecorator',
+ 'endDecorator',
]);
export default buttonClasses;
diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts
index 6f02ed975b2c3a..8f54d5be2dd0fb 100644
--- a/packages/mui-joy/src/styles/extendTheme.spec.ts
+++ b/packages/mui-joy/src/styles/extendTheme.spec.ts
@@ -187,6 +187,14 @@ extendTheme({
expectType, typeof ownerState>(ownerState);
return {};
},
+ startDecorator: ({ ownerState }) => {
+ expectType, typeof ownerState>(ownerState);
+ return {};
+ },
+ endDecorator: ({ ownerState }) => {
+ expectType, typeof ownerState>(ownerState);
+ return {};
+ },
},
},
JoyCard: {