Remove non-button props from those passed to Button.

src/components/Buttons/ButtonConfirmation.tsx

@@ -52,11 +52,12 @@ export default function ButtonConfirmation(props: ButtonConfirmationProps) {
           <Translate id="buttons.cancel" />
         </Button>
         <LoadingButton
-          onClick={onConfirm}
-          color="primary"
-          variant="contained"
           loading={loading}
-          {...props}
+          buttonProps={{
+            onClick: onConfirm,
+            color: "primary",
+            variant: "contained",
+          }}
         >
           <Translate id="buttons.confirm" />
         </LoadingButton>

src/components/Buttons/DeleteDialog.tsx

@@ -6,7 +6,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ButtonProps } from "@material-ui/core/Button";
 import React from "react";
 import { Translate } from "react-localize-redux";
 
@@ -20,7 +19,7 @@ interface DeleteDialogProps {
 /**
  * Dialog to confirm deletion
  */
-export default function DeleteDialog(props: ButtonProps & DeleteDialogProps) {
+export default function DeleteDialog(props: DeleteDialogProps) {
   return (
     <Dialog
       open={props.open}

src/components/Buttons/EditTextDialog.tsx

@@ -86,11 +86,12 @@ export default function EditTextDialog(props: EditTextDialogProps) {
           <Translate id="buttons.cancel" />
         </Button>
         <LoadingButton
-          onClick={onConfirm}
-          color="primary"
-          variant="contained"
           loading={loading}
-          {...props}
+          buttonProps={{
+            onClick: onConfirm,
+            color: "primary",
+            variant: "contained",
+          }}
         >
           <Translate id="buttons.confirm" />
         </LoadingButton>

src/components/Buttons/FileInputButton.tsx

@@ -5,11 +5,13 @@ import { ButtonProps } from "@material-ui/core/Button";
 export interface BrowseProps {
   updateFile: (file: File) => void;
   accept?: string;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 // This button links to a set of functions
-export default function FileInputButton(props: BrowseProps & ButtonProps) {
-  function updateFile(files: FileList) {
+export default function FileInputButton(props: BrowseProps) {
+  function updateFirstFile(files: FileList) {
     const file = files[0];
     if (file) {
       props.updateFile(file);
@@ -24,13 +26,13 @@ export default function FileInputButton(props: BrowseProps & ButtonProps) {
         type="file"
         name="name"
         accept={props.accept}
-        onChange={(e) => updateFile(e.target.files as FileList)}
+        onChange={(e) => updateFirstFile(e.target.files as FileList)}
         style={{ display: "none" }}
       />
 
       {/* ... and this button is tied to it with the htmlFor property */}
       <label htmlFor="file-input">
-        <Button variant="contained" component="span" {...props}>
+        <Button variant="contained" component="span" {...props.buttonProps}>
           {props.children}
         </Button>
       </label>

src/components/Buttons/LoadingButton.tsx

@@ -1,18 +1,21 @@
-import React from "react";
 import { Button, CircularProgress } from "@material-ui/core";
-import { buttonSuccess } from "../../types/theme";
 import { ButtonProps } from "@material-ui/core/Button";
+import React from "react";
+
+import { buttonSuccess } from "../../types/theme";
 
-interface Props {
+interface LoadingProps {
   loading: boolean;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 /**
  * A button that shows a spinning wheel when loading=true
  */
-export default function LoadingButton(props: Props & ButtonProps) {
+export default function LoadingButton(props: LoadingProps) {
   return (
-    <Button variant="contained" disabled={props.loading} {...props}>
+    <Button variant="contained" disabled={props.loading} {...props.buttonProps}>
       {props.children}
       {props.loading && (
         <CircularProgress

src/components/Buttons/LoadingDoneButton.tsx

@@ -1,31 +1,34 @@
-import React from "react";
 import { Button, CircularProgress } from "@material-ui/core";
-import { buttonSuccess } from "../../types/theme";
 import { ButtonProps } from "@material-ui/core/Button";
 import { Check } from "@material-ui/icons";
 import { Translate } from "react-localize-redux";
+import React from "react";
+
+import { buttonSuccess } from "../../types/theme";
 
-interface Props {
+interface LoadingDoneProps {
   loading: boolean;
   done: boolean;
   doneText?: React.ReactNode | string;
   disabled?: boolean;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 /**
  * A button that shows a spinning wheel when loading and "done" when done
  */
-export default function LoadingDoneButton(props: Props & ButtonProps) {
+export default function LoadingDoneButton(props: LoadingDoneProps) {
   return (
     <Button
       type="submit"
       variant="contained"
-      {...props}
+      {...props.buttonProps}
       disabled={props.disabled ? props.disabled : props.loading}
       style={{
         backgroundColor: props.done ? buttonSuccess : undefined,
         color: props.done ? "white" : undefined,
-        ...props.style,
+        ...props.buttonProps?.style,
       }}
     >
       {props.done ? (

src/components/PasswordReset/RequestPage/component.tsx

@@ -85,12 +85,14 @@ export default class ResetRequest extends React.Component<
               </Grid>
               <Grid item>
                 <LoadingDoneButton
-                  variant="contained"
-                  color="primary"
-                  onClick={() => this.onSubmit}
                   disabled={!this.state.emailOrUsername}
                   loading={this.state.loading}
                   done={this.state.done}
+                  buttonProps={{
+                    onClick: () => this.onSubmit,
+                    variant: "contained",
+                    color: "primary",
+                  }}
                 >
                   <Translate id="passwordReset.submit" />
                 </LoadingDoneButton>

src/components/ProjectExport/ExportProjectButton.tsx

@@ -7,16 +7,15 @@ import DownloadButton from "./DownloadButton";
 import { ExportStatus } from "./ExportProjectActions";
 import { ExportProjectState } from "./ExportProjectReducer";
 
-interface ExportProjectButtonProps {
+interface ExportProjectProps {
   exportProject: (projectId: string) => void;
   exportResult: ExportProjectState;
   projectId: string;
+  buttonProps?: ButtonProps;
 }
 
 /** A button for exporting project to Lift file */
-export default function ExportProjectButton(
-  props: ButtonProps & ExportProjectButtonProps
-) {
+export default function ExportProjectButton(props: ExportProjectProps) {
   const sameProject = props.projectId === props.exportResult.projectId;
   // The export button will not be clickable if another export is underway.
   const loading = [ExportStatus.InProgress, ExportStatus.Success].includes(
@@ -30,10 +29,12 @@ export default function ExportProjectButton(
   return (
     <React.Fragment>
       <LoadingButton
-        onClick={exportProj}
-        color="primary"
         loading={loading}
-        {...props}
+        buttonProps={{
+          ...props.buttonProps,
+          onClick: exportProj,
+          color: "primary",
+        }}
       >
         <Translate id="buttons.export" />
       </LoadingButton>

src/components/ProjectScreen/CreateProject/CreateProjectComponent.tsx

@@ -240,7 +240,7 @@ export class CreateProject extends React.Component<
             <FileInputButton
               updateFile={(file: File) => this.updateLanguageData(file)}
               accept=".zip"
-              style={{ marginTop: theme.spacing(2) }}
+              buttonProps={{ style: { marginTop: theme.spacing(2) } }}
             >
               <Translate id="buttons.browse" />
             </FileInputButton>
@@ -260,11 +260,13 @@ export class CreateProject extends React.Component<
               <LoadingDoneButton
                 loading={this.props.inProgress}
                 done={this.props.success}
-                color="primary"
-                style={{
-                  marginTop: theme.spacing(1),
-                }}
                 doneText={<Translate id="createProject.success" />}
+                buttonProps={{
+                  color: "primary",
+                  style: {
+                    marginTop: theme.spacing(1),
+                  },
+                }}
               >
                 <Translate id="createProject.create" />
               </LoadingDoneButton>

src/components/ProjectSettings/ProjectImport/ProjectImport.tsx

@@ -70,8 +70,10 @@ export class ProjectImport extends React.Component<
             {/* Choose file button */}
             <FileInputButton
               updateFile={this.updateLiftFile}
-              disabled={this.state.uploadState === UploadState.Done}
               accept=".zip"
+              buttonProps={{
+                disabled: this.state.uploadState === UploadState.Done,
+              }}
             >
               <Translate id="projectSettings.import.chooseFile" />
             </FileInputButton>

src/components/ProjectSettings/ProjectUsers/EmailInvite.tsx

@@ -102,12 +102,14 @@ class EmailInvite extends React.Component<InviteProps, InviteState> {
               <Grid container justify="flex-end" spacing={2}>
                 <Grid item>
                   <LoadingDoneButton
-                    variant="contained"
-                    color="primary"
-                    onClick={() => this.onSubmit()}
                     disabled={!this.state.isValid}
                     loading={this.state.loading}
                     done={this.state.done}
+                    buttonProps={{
+                      onClick: () => this.onSubmit(),
+                      variant: "contained",
+                      color: "primary",
+                    }}
                   >
                     <Translate id="buttons.invite" />
                   </LoadingDoneButton>

src/components/SiteSettings/ProjectManagement/ProjectManagement.tsx

@@ -49,7 +49,7 @@ export class ProjectManagement extends React.Component<
           {/* Export Lift file */}
           <ExportProjectButton
             projectId={project.id}
-            style={{ marginRight: theme.spacing(1) }}
+            buttonProps={{ style: { marginRight: theme.spacing(1) } }}
           />
           {/* Archive active project or restore archived project. */}
           <ProjectButtonWithConfirmation

src/components/UserSettings/AvatarUpload.tsx

@@ -64,8 +64,12 @@ export default function AvatarUpload(props: { doneCallback?: () => void }) {
           </FileInputButton>
         </Grid>
         <Grid item>
-          <LoadingDoneButton loading={loading} done={done} type="submit">
-            Save
+          <LoadingDoneButton
+            loading={loading}
+            done={done}
+            buttonProps={{ type: "submit" }}
+          >
+            <Translate id="buttons.Save" />
           </LoadingDoneButton>
         </Grid>
       </Grid>