Submit Button

The SubmitButton component is a custom button that handles form submission states. It displays a loading indicator when the form is being processed. The loading color can be customized through the loaderColor prop.

You can find the Submit Button component in src/components/SubmitButton.tsx.

Props

• isCircleLoader (optional): Specifies whether to display a circular loader instead of the default bar loader.
• loaderColor (optional): Sets the color of the loader. Defaults to white if not provided.
• children: The text or content to be displayed inside the button.
• All other props are passed through to the underlying Button component from the UI library.

The SubmitButton component automatically handles the form submission state by utilizing the useFormStatus hook from react-dom. It checks if the form is pending and if the action matches the form action prop. When the form is being processed, a loading indicator is displayed based on the isCircleLoader prop. If isCircleLoader is set to true, a circular loader (LuLoader) is shown, otherwise, a bar loader (BarLoader) is used.

The loading color can be customized by passing the loaderColor prop. If not provided, the default color is white.

Usage

Simply import the Submit Button component and pass the required props as shown below:

import { SubmitButton } from "@/components/SubmitButton";
 
export default function MyForm() {
  return (
    <form action="/api/submit">
      {/* Form fields */}
      <SubmitButton loaderColor="#FF0000">Submit</SubmitButton>
    </form>
  );
}