[Button] Add loading prop (#44637)

mui · Jan 13, 2025 · a76cf2e · a76cf2e
1 parent 75e9bf5
commit a76cf2e
Show file tree

Hide file tree

Showing 47 changed files with 918 additions and 1,588 deletions.
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/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>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/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>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/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>
diff --git a/docs/data/material/components/button-group/button-group.md b/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"}}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js
@@ -0,0 +1,21 @@
+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 ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  & .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  return (
+    <IconButton>
+      <ShoppingCartIcon fontSize="small" />
+      <CartBadge badgeContent={2} color="primary" overlap="circular" />
+    </IconButton>
+  );
+}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx b/docs/data/material/components/buttons/IconButtonWithBadge.tsx
@@ -0,0 +1,21 @@
+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 ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  & .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  return (
+    <IconButton>
+      <ShoppingCartIcon fontSize="small" />
+      <CartBadge badgeContent={2} color="primary" overlap="circular" />
+    </IconButton>
+  );
+}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
@@ -0,0 +1,4 @@
+<IconButton>
+  <ShoppingCartIcon fontSize="small" />
+  <CartBadge badgeContent={2} color="primary" overlap="circular" />
+</IconButton>
diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js
@@ -1,25 +1,61 @@
 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 direction="row" spacing={2}>
+        <Button loading variant="outlined" loadingPosition="start">
+          Submit
+        </Button>
+        <Button loading variant="outlined" loadingPosition="end">
+          Submit
+        </Button>
+        <Button
+          loading
+          variant="outlined"
+          loadingPosition="end"
+          startIcon={<SaveIcon />}
+        >
+          Save
+        </Button>
+      </Stack>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/LoadingButtons.tsx
@@ -1,25 +1,61 @@
 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 direction="row" spacing={2}>
+        <Button loading variant="outlined" loadingPosition="start">
+          Submit
+        </Button>
+        <Button loading variant="outlined" loadingPosition="end">
+          Submit
+        </Button>
+        <Button
+          loading
+          variant="outlined"
+          loadingPosition="end"
+          startIcon={<SaveIcon />}
+        >
+          Save
+        </Button>
+      </Stack>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx.preview b/docs/data/material/components/buttons/LoadingButtons.tsx.preview
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/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>
   );