loading-button-example.tsx

<LoadingButton
  ariaErrorAlert={"There was an error creating your account"}
  ariaLoadingAlert={
    authState === AuthState.CreatingUser
      ? "Registering account, please wait..."
      : authState === AuthState.FulfillingPurchase
      ? "Generating license, please wait..."
      : "Loading..."
  }
  ariaSuccessAlert="Account created! Redirecting."
  ariaText="Create Account"
  disabled={!formIsValid}
  icon={<IconLock className="h-5 w-5 text-blue-700" />}
  iconError={<IconError className="h-5 w-5" />}
  iconLoading={<BeatSpinner />}
  iconSuccess={<IconCheck className="h-5 w-5" />}
  state={
    authState === AuthState.CreatingUser ||
    authState === AuthState.FulfillingPurchase
      ? "loading"
      : authState === AuthState.Error
      ? "error"
      : authState === AuthState.Success
      ? "success"
      : "idle"
  }
  text="Create Account"
  textLoading={
    authState === AuthState.CreatingUser
      ? "Registering..."
      : authState === AuthState.FulfillingPurchase
      ? "Generating license..."
      : "Loading..."
  }
  type="submit"
  className={`w-full py-2 px-4 border-2 border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:border-yellow-500 ${
    formIsValid ? "" : "opacity-50"
  }`}
/>

https://codesandbox.io/s/loadingbutton-reworked-121i1?file=/src/App.tsx