React loading button

A small and lightweight button in React that supports loading state and three different animations. The button is fully customizable and easy to use.

Button props

interface ILoadingButton {
  text: string; // Text of the button
  onClick: () => any; // Callback function
  isLoading: boolean; // Loading state
  loadingMode: "PROGRESS" | "BOUNCE" | "SPINNER"; // Loading animation mode
  clickWhenLoading?: boolean; // If set to true, the button will still fire onClick() even if loading. Default is set to false.
  animationColor?: string; // Color of the chosen animation, default: "white".
  buttonStyle?: any; // Style object of the button
}

Demo

Default button

Bouncing ball

Spinner

Usage

Below, we will show some examples of how it can be used

Download

npm i reactjs-loading-button

Default button

Below is the default button. Black background and white animation with white text.

import { LoadingButton } from "reactjs-loading-button";

<LoadingButton
  text="Default"
  isLoading={isLoading}
  onClick={() => ""}
  loadingMode="PROGRESS"
/>;

Custom styles, bounce animation

Blue button with bounce animation

import { LoadingButton } from "reactjs-loading-button";

<LoadingButton
  text="Bounce"
  isLoading={isLoading}
  onClick={() => ""}
  loadingMode="BOUNCE"
  buttonStyle={{
    backgroundColor: "#0069c4",
    color: "white",
    fontWeight: "bold",
  }}
/>;

Custom styles, spinner animation

Orange button with spinner animation

import { LoadingButton } from "reactjs-loading-button";

<LoadingButton
  text="Spinner"
  isLoading={isLoading}
  onClick={() => ""}
  loadingMode="SPINNER"
  buttonStyle={{
    backgroundColor: "#b38808",
    color: "white",
    fontWeight: "bold",
  }}
/>;

clickWhenLoading

If you still want the button to fire when it is loading, set clickWhenLoading to true

import { LoadingButton } from "reactjs-loading-button";

<LoadingButton
  clickWhenLoading
  text="Spinner"
  isLoading={isLoading}
  onClick={() => console.log("I am always clicked")}
  loadingMode="SPINNER"
/>;

animationColor

If you want a custom color of the animation, set animationColor to your preferred color

import { LoadingButton } from "reactjs-loading-button";

<LoadingButton
  animationColor="#8f0a0a"
  text="Spinner"
  isLoading={isLoading}
  onClick={() => ""}
  loadingMode="SPINNER"
  clickWhenLoading
  buttonStyle={{
    backgroundColor: "#b38808",
    color: "#8f0a0a",
    fontWeight: "bold",
  }}
/>;

Feedback

Is something missing? Not working? Just email us, we love to improve our software. Email can be found here.