diff --git a/src/components/Form/BaseFormSubmitButton.tsx b/src/components/Form/BaseFormSubmitButton.tsx
new file mode 100644
index 00000000..649bac31
--- /dev/null
+++ b/src/components/Form/BaseFormSubmitButton.tsx
@@ -0,0 +1,33 @@
+import { grid as muiGridSxProps, type GridProps as MuiGridSxProps } from "@mui/system";
+import { styled } from "@mui/material/styles";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import { ButtonLoadingIndicator } from "@/components/Indicators/ButtonLoadingIndicator";
+import type { Simplify } from "type-fest";
+
+/**
+ * A form submit button which shows a loading indicator when `isLoading` is `true`.
+ *
+ * > _This is used by `Form/FormSubmitButton` and `StripeForm/StripeFormSubmitButton`_.
+ */
+export const BaseFormSubmitButton = ({
+ label,
+ type = "button",
+ isLoading,
+ ...buttonProps
+}: BaseFormSubmitButtonProps) => (
+
+ {isLoading ? : label}
+
+);
+
+const StyledButton = styled(Button, {
+ shouldForwardProp: (propName: string) => !propName.startsWith("grid"),
+})({
+ height: "2.75rem", // default is 2.5rem
+ position: "relative",
+ ...muiGridSxProps,
+});
+
+export type BaseFormSubmitButtonProps = Simplify<
+ { label: string; isLoading: boolean } & Omit & MuiGridSxProps
+>;
diff --git a/src/components/Form/FormSubmitButton.tsx b/src/components/Form/FormSubmitButton.tsx
index a96acd77..9cb2467b 100644
--- a/src/components/Form/FormSubmitButton.tsx
+++ b/src/components/Form/FormSubmitButton.tsx
@@ -1,10 +1,12 @@
import { useFormikContext } from "formik";
-import { grid as muiGridSxProps, type GridProps as MuiGrisSxProps } from "@mui/system";
-import { styled } from "@mui/material/styles";
-import Button, { type ButtonProps } from "@mui/material/Button";
+import { BaseFormSubmitButton, type BaseFormSubmitButtonProps } from "./BaseFormSubmitButton";
import { formClassNames } from "./classNames";
+import type { Simplify } from "type-fest";
-export const FormSubmitButton = (props: FormSubmitButtonProps) => {
+/**
+ * Formik-integrated submit button (uses {@link BaseFormSubmitButton}).
+ */
+export const FormSubmitButton = ({ className = "", ...props }: FormSubmitButtonProps) => {
const { handleSubmit, isSubmitting } = useFormikContext();
const handleClick = (event: React.MouseEvent) => {
@@ -13,22 +15,17 @@ export const FormSubmitButton = (props: FormSubmitButtonProps) => {
};
return (
-
- Submit
-
+ />
);
};
-const StyledButton = styled(Button, {
- shouldForwardProp: (propName: string) => !propName.startsWith("grid"),
-})({
- lineHeight: "2rem",
- ...muiGridSxProps,
-});
-
-export type FormSubmitButtonProps = Omit;
+export type FormSubmitButtonProps = Simplify<
+ Omit
+>;