[Button] Fix CircularProgress import (mui#44473)

docs/data/material/components/buttons/buttons.md

@@ -115,7 +115,7 @@ Use `color` prop to apply theme color palette to component.
 
 ### Loading
 
-Use `loading` prop to set icon buttons in a loading state and disable interactions.
+Starting from [`v6.2.0`](https://github.com/mui/material-ui/releases/tag/v6.2.0), use `loading` prop to set icon buttons in a loading state and disable interactions.
 
 {{"demo": "LoadingIconButton.js"}}
 
@@ -133,7 +133,7 @@ To create a file upload button, turn the button into a label using `component="l
 
 ## Loading
 
-Use the `loading` prop to set buttons in a loading state and disable interactions.
+Starting from [`v6.2.0`](https://github.com/mui/material-ui/releases/tag/v6.2.0), use the `loading` prop to set buttons in a loading state and disable interactions.
 
 {{"demo": "LoadingButtons.js"}}
 

docs/translations/api-docs/button/button.json

@@ -25,10 +25,10 @@
       "description": "The URL to link to when the button is clicked. If defined, an <code>a</code> element will be used as the root node."
     },
     "loading": {
-      "description": "If <code>true</code>, the loading indicator is shown and the button becomes disabled."
+      "description": "If <code>true</code>, the loading indicator is visible and the button is disabled."
     },
     "loadingIndicator": {
-      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself."
+      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default, it renders a <code>CircularProgress</code> that is labeled by the button itself."
     },
     "loadingPosition": {
       "description": "The loading indicator can be positioned on the start, end, or the center of the button."

docs/translations/api-docs/icon-button/icon-button.json

@@ -17,10 +17,10 @@
       "description": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape)."
     },
     "loading": {
-      "description": "If <code>true</code>, the loading indicator is shown and the button becomes disabled."
+      "description": "If <code>true</code>, the loading indicator is visible and the button is disabled."
     },
     "loadingIndicator": {
-      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default we render a <code>CircularProgress</code> that is labelled by the button itself."
+      "description": "Element placed before the children if the button is in loading state. The node should contain an element with <code>role=&quot;progressbar&quot;</code> with an accessible name. By default, it renders a <code>CircularProgress</code> that is labeled by the button itself."
     },
     "size": {
       "description": "The size of the component. <code>small</code> is equivalent to the dense button styling."

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -10,8 +10,8 @@ const warn = () => {
       [
         'MUI: The LoadingButton component functionality is now part of the Button component from Material UI.',
         '',
-        "You should use `import { Button } from '@mui/material'`",
-        "or `import Button from '@mui/material/Button'`",
+        "You should use `import Button from '@mui/material/Button'`",
+        "or `import { Button } from '@mui/material'`",
       ].join('\n'),
     );
 

packages/mui-material/src/Button/Button.d.ts

@@ -61,14 +61,14 @@ export interface ButtonOwnProps {
    */
   href?: string;
   /**
-   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * If `true`, the loading indicator is visible and the button is disabled.
    * @default false
    */
   loading?: boolean;
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator?: React.ReactNode;

packages/mui-material/src/Button/Button.js

@@ -6,12 +6,12 @@ import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { unstable_useId as useId } from '@mui/material/utils';
-import CircularProgress from '@mui/material/CircularProgress';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
+import CircularProgress from '../CircularProgress';
 import capitalize from '../utils/capitalize';
 import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
@@ -677,14 +677,14 @@ Button.propTypes /* remove-proptypes */ = {
    */
   id: PropTypes.string,
   /**
-   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * If `true`, the loading indicator is visible and the button is disabled.
    * @default false
    */
   loading: PropTypes.bool,
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,

packages/mui-material/src/IconButton/IconButton.d.ts

@@ -48,14 +48,14 @@ export interface IconButtonOwnProps {
    */
   edge?: 'start' | 'end' | false;
   /**
-   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * If `true`, the loading indicator is visible and the button is disabled.
    * @default false
    */
   loading?: boolean;
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator?: React.ReactNode;

packages/mui-material/src/IconButton/IconButton.js

@@ -5,13 +5,13 @@ import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { unstable_useId as useId } from '@mui/material/utils';
-import CircularProgress from '@mui/material/CircularProgress';
 import { alpha } from '@mui/system/colorManipulator';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
+import CircularProgress from '../CircularProgress';
 import capitalize from '../utils/capitalize';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 
@@ -306,14 +306,14 @@ IconButton.propTypes /* remove-proptypes */ = {
    */
   id: PropTypes.string,
   /**
-   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * If `true`, the loading indicator is visible and the button is disabled.
    * @default false
    */
   loading: PropTypes.bool,
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
    * @default <CircularProgress color="inherit" size={16} />
    */
   loadingIndicator: PropTypes.node,