mui · renovate · Feb 24, 2025 · Feb 25, 2025
diff --git a/docs/data/toolpad/core/components/sign-in-page/customTheme.js b/docs/data/toolpad/core/components/sign-in-page/customTheme.js
@@ -433,13 +433,7 @@ export const inputsCustomizations = {
             },
           },
         ],
-      }),
-    },
-  },
-  MuiLoadingButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiLoadingButton-loadingIndicator': {
+        '& .MuiButton-loadingIndicator': {
           color: gray[400],
           ...theme.applyStyles('dark', {
             color: gray[600],

diff --git a/docs/data/toolpad/core/components/sign-in-page/customTheme.tsx b/docs/data/toolpad/core/components/sign-in-page/customTheme.tsx
@@ -462,15 +462,7 @@ export const inputsCustomizations: Components<Theme> = {
             },
           },
         ],
-      }),
-    },
-  },
-  // @ts-ignore TODO: MuiLoadingButton is not present in the default `theme`
-  MuiLoadingButton: {
-    styleOverrides: {
-      // @ts-ignore
-      root: ({ theme }) => ({
-        '& .MuiLoadingButton-loadingIndicator': {
+        '& .MuiButton-loadingIndicator': {
           color: gray[400],
           ...theme.applyStyles('dark', {
             color: gray[600],

diff --git a/docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayloadAdvanced.js b/docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayloadAdvanced.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -38,7 +37,7 @@ function TransactionDialog({ payload, open, onClose }) {
       <DialogTitle>Confirm transfer</DialogTitle>
       <DialogContent>{payload.component}</DialogContent>
       <DialogActions>
-        <LoadingButton
+        <Button
           loading={loading}
           disabled={!isValidCsrf}
           onClick={async () => {
@@ -52,7 +51,7 @@ function TransactionDialog({ payload, open, onClose }) {
           }}
         >
           Submit
-        </LoadingButton>
+        </Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayloadAdvanced.tsx b/docs/data/toolpad/core/components/use-dialogs/CustomDialogWithPayloadAdvanced.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -45,7 +44,7 @@ function TransactionDialog({
       <DialogTitle>Confirm transfer</DialogTitle>
       <DialogContent>{payload.component}</DialogContent>
       <DialogActions>
-        <LoadingButton
+        <Button
           loading={loading}
           disabled={!isValidCsrf}
           onClick={async () => {
@@ -59,7 +58,7 @@ function TransactionDialog({
           }}
         >
           Submit
-        </LoadingButton>
+        </Button>
       </DialogActions>
     </Dialog>
   );

diff --git a/docs/package.json b/docs/package.json
@@ -102,8 +102,8 @@
     "@types/react-is": "^19.0.0",
     "@types/react-swipeable-views": "^0.13.6",
     "cpy-cli": "5.0.0",
-    "cross-fetch": "4.0.0",
-    "typescript": "5.5.4",
+    "cross-fetch": "4.1.0",
+    "typescript": "5.7.3",
     "typescript-to-proptypes": "2.2.1"
   }
 }
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
@@ -217,15 +217,7 @@ export const inputsCustomizations: Components<Theme> = {
             },
           },
         ],
-      }),
-    },
-  },
-  // @ts-ignore TODO: MuiLoadingButton is not present in the default `theme`
-  MuiLoadingButton: {
-    styleOverrides: {
-      // @ts-ignore
-      root: ({ theme }) => ({
-        '& .MuiLoadingButton-loadingIndicator': {
+        '& .MuiButton-loadingIndicator': {
           color: gray[400],
           ...theme.applyStyles('dark', {
             color: gray[600],

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "clean": "pnpm -r exec rm -rf build dist"
   },
   "devDependencies": {
-    "@argos-ci/core": "2.11.0",
+    "@argos-ci/core": "2.12.0",
     "@babel/cli": "7.25.9",
     "@babel/core": "7.26.0",
     "@babel/node": "7.26.0",
@@ -61,8 +61,8 @@
     "@next/eslint-plugin-next": "14.2.24",
     "@playwright/test": "1.47.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/archiver": "6.0.3",
     "@types/fs-extra": "11.0.4",
     "@types/gtag.js": "0.0.20",
@@ -74,10 +74,10 @@
     "@vitest/coverage-v8": "2.1.9",
     "babel-plugin-react-remove-properties": "0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "chalk": "5.3.0",
-    "concurrently": "9.1.0",
+    "chalk": "5.4.1",
+    "concurrently": "9.1.2",
     "css-mediaquery": "^0.1.2",
-    "danger": "^12.3.3",
+    "danger": "^12.3.4",
     "eslint": "8.57.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -94,21 +94,21 @@
     "eslint-plugin-testing-library": "^6.5.0",
     "eslint-plugin-typescript-enum": "2.1.0",
     "execa": "9.5.2",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "format-util": "1.0.5",
-    "fs-extra": "11.2.0",
-    "globby": "14.0.2",
+    "fs-extra": "11.3.0",
+    "globby": "14.1.0",
     "jsdom": "25.0.1",
-    "lerna": "8.1.9",
-    "markdownlint-cli2": "0.15.0",
-    "prettier": "3.4.1",
+    "lerna": "8.2.0",
+    "markdownlint-cli2": "0.17.2",
+    "prettier": "3.5.2",
     "pretty-quick": "4.0.0",
     "react-docgen": "5.4.3",
     "react-inspector": "6.0.2",
     "regenerator-runtime": "0.14.1",
     "remark": "15.0.1",
     "rimraf": "6.0.1",
-    "typescript": "5.5.4",
+    "typescript": "5.7.3",
     "unist-util-visit": "5.0.0",
     "vitest-dom": "0.1.1",
     "vitest-fail-on-console": "0.7.1"

diff --git a/packages/toolpad-core/src/SignInPage/SignInPage.tsx b/packages/toolpad-core/src/SignInPage/SignInPage.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Alert from '@mui/material/Alert';
+import Button, { ButtonProps } from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Checkbox from '@mui/material/Checkbox';
@@ -17,7 +18,6 @@ import FingerprintIcon from '@mui/icons-material/Fingerprint';
 import AppleIcon from '@mui/icons-material/Apple';
 import { alpha, useTheme, SxProps, type Theme } from '@mui/material/styles';
 import { LinkProps } from '@mui/material/Link';
-import Button, { ButtonProps } from '@mui/material/Button';
 import GoogleIcon from './icons/Google';
 import FacebookIcon from './icons/Facebook';
 import TwitterIcon from './icons/Twitter';
@@ -269,7 +269,7 @@ export interface SignInPageProps {
     signUpLink?: LinkProps;
     rememberMe?: Partial<FormControlLabelProps>;
     form?: Partial<React.FormHTMLAttributes<HTMLFormElement>>;
-    oAuthButton?: LoadingButtonProps;
+    oAuthButton?: ButtonProps;
   };
   /**
    * The prop used to customize the styles on the `SignInPage` container

diff --git a/packages/toolpad-studio-components/src/Button.tsx b/packages/toolpad-studio-components/src/Button.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LoadingButton as MuiButton, LoadingButtonProps as MuiButtonProps } from '@mui/lab';
+import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';
 import createBuiltin from './createBuiltin';
 import { SX_PROP_HELPER_TEXT } from './constants';
 

diff --git a/packages/toolpad-studio-components/src/Form.tsx b/packages/toolpad-studio-components/src/Form.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Box, BoxProps, Stack, styled } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
+import { Box, BoxProps, Button, Stack, styled } from '@mui/material';
 import { useNode } from '@toolpad/studio-runtime';
 import { equalProperties } from '@toolpad/utils/collections';
 import {
@@ -104,24 +103,24 @@ function Form({
                 sx={{ flex: formControlsFullWidth ? 1 : '0 1 auto' }}
               >
                 {hasResetButton ? (
-                  <LoadingButton
+                  <Button
                     type="reset"
                     color="secondary"
                     variant="contained"
                     sx={{ flex: formControlsFullWidth ? 1 : '0 1 auto' }}
                   >
                     Reset
-                  </LoadingButton>
+                  </Button>
                 ) : null}
-                <LoadingButton
+                <Button
                   type="submit"
                   color="primary"
                   variant="contained"
                   loading={form.formState.isSubmitting}
                   sx={{ flex: formControlsFullWidth ? 1 : '0 1 auto' }}
                 >
                   {submitButtonText}
-                </LoadingButton>
+                </Button>
               </Stack>
             </Box>
           </form>

diff --git a/packages/toolpad-studio/package.json b/packages/toolpad-studio/package.json
@@ -176,7 +176,7 @@
     "eslint-plugin-import": "2.31.0",
     "formidable": "3.5.2",
     "react-transition-group": "4.4.5",
-    "webpack": "5.96.1"
+    "webpack": "5.98.0"
   },
   "typings": "./index.d.ts",
   "publishConfig": {

diff --git a/packages/toolpad-studio/src/components/SystemDialogs.tsx b/packages/toolpad-studio/src/components/SystemDialogs.tsx
@@ -1,4 +1,3 @@
-import { LoadingButton, LoadingButtonProps } from '@mui/lab';
 import {
   Dialog,
   DialogTitle,
@@ -21,11 +20,11 @@ const SystemDialogCancelButton = React.forwardRef<HTMLButtonElement, ButtonProps
     </Button>
   ),
 );
-const SystemDialogOkButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(
+const SystemDialogOkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children = 'ok', ...props }, ref) => (
-    <LoadingButton ref={ref} {...props}>
+    <Button ref={ref} {...props}>
       {children}
-    </LoadingButton>
+    </Button>
   ),
 );
 

diff --git a/packages/toolpad-studio/src/runtime/SignInPage.tsx b/packages/toolpad-studio/src/runtime/SignInPage.tsx
@@ -12,7 +12,6 @@ import {
 import GitHubIcon from '@mui/icons-material/GitHub';
 import PasswordIcon from '@mui/icons-material/Password';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { LoadingButton } from '@mui/lab';
 import { useSearchParams } from 'react-router';
 import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { AuthProvider, AuthContext } from './useAuth';
@@ -165,7 +164,7 @@ export default function SignInPage() {
                       />
                     )}
                   />
-                  <LoadingButton
+                  <Button
                     variant="contained"
                     type="submit"
                     loading={isSigningIn && latestSelectedProvider === 'credentials'}
@@ -174,14 +173,14 @@ export default function SignInPage() {
                     fullWidth
                   >
                     Sign in
-                  </LoadingButton>
+                  </Button>
                 </Stack>
               </form>
             </React.Fragment>
           ) : (
             <React.Fragment>
               {authProviders.includes('github') ? (
-                <LoadingButton
+                <Button
                   variant="contained"
                   onClick={handleSignIn('github')}
                   startIcon={<GitHubIcon />}
@@ -195,10 +194,10 @@ export default function SignInPage() {
                   }}
                 >
                   Sign in with GitHub
-                </LoadingButton>
+                </Button>
               ) : null}
               {authProviders.includes('google') ? (
-                <LoadingButton
+                <Button
                   variant="contained"
                   onClick={handleSignIn('google')}
                   startIcon={
@@ -225,10 +224,10 @@ export default function SignInPage() {
                   }}
                 >
                   Sign in with Google
-                </LoadingButton>
+                </Button>
               ) : null}
               {authProviders.includes('azure-ad') ? (
-                <LoadingButton
+                <Button
                   variant="contained"
                   onClick={handleSignIn('azure-ad')}
                   startIcon={azureIconSvg}
@@ -242,7 +241,7 @@ export default function SignInPage() {
                   }}
                 >
                   Sign in with Azure AD
-                </LoadingButton>
+                </Button>
               ) : null}
               {authProviders.includes('credentials') ? (
                 <React.Fragment>
@@ -251,7 +250,7 @@ export default function SignInPage() {
                       <Typography variant="caption">OR</Typography>
                     </Divider>
                   ) : null}
-                  <LoadingButton
+                  <Button
                     variant="contained"
                     onClick={handleCredentialsSignIn}
                     startIcon={<PasswordIcon />}
@@ -262,7 +261,7 @@ export default function SignInPage() {
                     fullWidth
                   >
                     Sign in with credentials
-                  </LoadingButton>
+                  </Button>
                 </React.Fragment>
               ) : null}
             </React.Fragment>

diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NodeId } from '@toolpad/studio-runtime';
-import { Stack, Chip, Tab, IconButton, LinearProgress } from '@mui/material';
-import { LoadingButton, TabList, TabContext, TabPanel } from '@mui/lab';
+import { Button, Stack, Chip, Tab, IconButton, LinearProgress } from '@mui/material';
+import { TabList, TabContext, TabPanel } from '@mui/lab';
 import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
 import CircleIcon from '@mui/icons-material/Circle';
 import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
@@ -251,7 +251,7 @@ export default function QueryEditor() {
             ))}
           </TabList>
           <div>
-            <LoadingButton
+            <Button
               disabled={saveDisabled}
               onClick={handleSave}
               variant="contained"
@@ -260,7 +260,7 @@ export default function QueryEditor() {
             >
               Save &nbsp;
               <SaveShortcutIndicator />
-            </LoadingButton>
+            </Button>
             <IconButton size="small" disableRipple onClick={handleClosePanel}>
               <CancelPresentationIcon
                 sx={{