sendou.ink/app/components/SubmitButton.tsx

import { type FetcherWithComponents, useNavigation } from "@remix-run/react";
import { Button, type ButtonProps } from "./Button";

interface SubmitButtonProps extends ButtonProps {
  /** If the page has multiple forms you can pass in fetcher.state to differentiate when this SubmitButton should be in submitting state */
  state?: FetcherWithComponents<any>["state"];
  _action?: string;
}

export function SubmitButton({
  children,
  state,
  _action,
  testId,
  ...rest
}: SubmitButtonProps) {
  const navigation = useNavigation();

  const isSubmitting = state ? state !== "idle" : navigation.state !== "idle";

  const name = () => {
    if (rest.name) return rest.name;
    if (_action) return "_action";

    return undefined;
  };

  const value = () => {
    if (rest.value) return rest.value;
    if (_action) return _action;

    return undefined;
  };

  return (
    <Button
      {...rest}
      disabled={rest.disabled || isSubmitting}
      type="submit"
      name={name()}
      value={value()}
      data-testid={testId ?? "submit-button"}
    >
      {children}
    </Button>
  );
}