[material-ui][Button] Add loading feature to Button

docs/data/material/components/button-group/LoadingButtonGroup.js

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <LoadingButton>Fetch data</LoadingButton>
-      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <Button>Fetch data</Button>
+      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </LoadingButton>
+      </Button>
     </ButtonGroup>
   );
 }

docs/data/material/components/button-group/LoadingButtonGroup.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <LoadingButton>Fetch data</LoadingButton>
-      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <Button>Fetch data</Button>
+      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </LoadingButton>
+      </Button>
     </ButtonGroup>
   );
 }

docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview

@@ -1,7 +1,7 @@
 <ButtonGroup variant="outlined" aria-label="Loading button group">
   <Button>Submit</Button>
-  <LoadingButton>Fetch data</LoadingButton>
-  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+  <Button>Fetch data</Button>
+  <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
     Save
-  </LoadingButton>
+  </Button>
 </ButtonGroup>

docs/data/material/components/button-group/button-group.md

@@ -1,7 +1,7 @@
 ---
 productId: material-ui
 title: React Button Group component
-components: Button, ButtonGroup, LoadingButton
+components: Button, ButtonGroup
 githubLabel: 'component: ButtonGroup'
 githubSource: packages/mui-material/src/ButtonGroup
 ---
@@ -49,10 +49,8 @@ You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
 
-## Experimental APIs
+## Loading
 
-### Loading button
-
-You can use the [`<LoadingButton />`](/material-ui/react-button/#loading-button) from [`@mui/lab`](/material-ui/about-the-lab/) in the button group.
+Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions.
 
 {{"demo": "LoadingButtonGroup.js"}}

docs/data/material/components/buttons/IconButtonWithBadge.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Badge, { badgeClasses } from '@mui/material/Badge';
+import Stack from '@mui/material/Stack';
+import SaveIcon from '@mui/icons-material/Save';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  });
+  return (
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
+      <IconButton loading>
+        <Badge badgeContent={4} color="primary">
+          <SaveIcon />
+        </Badge>
+      </IconButton>
+      <IconButton loading={loading} onClick={() => setLoading(true)}>
+        <ShoppingCartIcon fontSize="small" />
+        <CartBadge badgeContent={2} color="primary" overlap="circular" />
+      </IconButton>
+    </Stack>
+  );
+}

docs/data/material/components/buttons/IconButtonWithBadge.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Badge, { badgeClasses } from '@mui/material/Badge';
+import Stack from '@mui/material/Stack';
+import SaveIcon from '@mui/icons-material/Save';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  });
+  return (
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
+      <IconButton loading>
+        <Badge badgeContent={4} color="primary">
+          <SaveIcon />
+        </Badge>
+      </IconButton>
+      <IconButton loading={loading} onClick={() => setLoading(true)}>
+        <ShoppingCartIcon fontSize="small" />
+        <CartBadge badgeContent={2} color="primary" overlap="circular" />
+      </IconButton>
+    </Stack>
+  );
+}

docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview

@@ -0,0 +1,9 @@
+<IconButton loading>
+  <Badge badgeContent={4} color="primary">
+    <SaveIcon />
+  </Badge>
+</IconButton>
+<IconButton loading={loading} onClick={() => setLoading(true)}>
+  <ShoppingCartIcon fontSize="small" />
+  <CartBadge badgeContent={2} color="primary" overlap="circular" />
+</IconButton>

docs/data/material/components/buttons/LoadingButtons.js

@@ -1,25 +1,45 @@
 import * as React from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack direction="row" spacing={2}>
-      <LoadingButton loading variant="outlined">
-        Submit
-      </LoadingButton>
-      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <Button loading variant="outlined">
+          Submit
+        </Button>
+        <Button loading loadingIndicator="Loading…" variant="outlined">
+          Fetch data
+        </Button>
+        <Button
+          loading
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="outlined"
+        >
+          Save
+        </Button>
+      </Stack>
+      <Button
+        fullWidth
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Save
-      </LoadingButton>
+        Full width
+      </Button>
+      <Button
+        fullWidth
+        loading
+        loadingPosition="end"
+        endIcon={<SaveIcon />}
+        variant="outlined"
+      >
+        Full width
+      </Button>
     </Stack>
   );
 }

docs/data/material/components/buttons/LoadingButtons.tsx

@@ -1,25 +1,45 @@
 import * as React from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack direction="row" spacing={2}>
-      <LoadingButton loading variant="outlined">
-        Submit
-      </LoadingButton>
-      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <Button loading variant="outlined">
+          Submit
+        </Button>
+        <Button loading loadingIndicator="Loading…" variant="outlined">
+          Fetch data
+        </Button>
+        <Button
+          loading
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="outlined"
+        >
+          Save
+        </Button>
+      </Stack>
+      <Button
+        fullWidth
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Save
-      </LoadingButton>
+        Full width
+      </Button>
+      <Button
+        fullWidth
+        loading
+        loadingPosition="end"
+        endIcon={<SaveIcon />}
+        variant="outlined"
+      >
+        Full width
+      </Button>
     </Stack>
   );
 }

docs/data/material/components/buttons/LoadingButtonsTransition.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -27,25 +27,25 @@ export default function LoadingButtonsTransition() {
         label="Loading"
       />
       <Box sx={{ '& > button': { m: 1 } }}>
-        <LoadingButton
+        <Button
           size="small"
           onClick={handleClick}
           loading={loading}
           variant="outlined"
           disabled
         >
           Disabled
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           size="small"
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
           Fetch data
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           size="small"
           onClick={handleClick}
           endIcon={<SendIcon />}
@@ -54,8 +54,8 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Send
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           size="small"
           color="secondary"
           onClick={handleClick}
@@ -65,35 +65,30 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Save
-        </LoadingButton>
+        </Button>
       </Box>
       <Box sx={{ '& > button': { m: 1 } }}>
-        <LoadingButton
-          onClick={handleClick}
-          loading={loading}
-          variant="outlined"
-          disabled
-        >
+        <Button onClick={handleClick} loading={loading} variant="outlined" disabled>
           Disabled
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           onClick={handleClick}
           loading={loading}
           loadingIndicator="Loading…"
           variant="outlined"
         >
           Fetch data
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           onClick={handleClick}
           endIcon={<SendIcon />}
           loading={loading}
           loadingPosition="end"
           variant="contained"
         >
           Send
-        </LoadingButton>
-        <LoadingButton
+        </Button>
+        <Button
           color="secondary"
           onClick={handleClick}
           loading={loading}
@@ -102,7 +97,7 @@ export default function LoadingButtonsTransition() {
           variant="contained"
         >
           Save
-        </LoadingButton>
+        </Button>
       </Box>
     </div>
   );