A curated list of best Progress Button Components.

1. reactive-button

3D animated react button component with progress bar.

Here is a demo gif:


Reactive Button Preview

Reactive Button is a 3D animated react component to replace the traditional boring buttons. Change your button style without adding any UI framework. Comes with progress bar and the goal is to let the users visualize what is happening after a button click.

  • 3D
  • Animated
  • Supports icons
  • Zero dependency
  • Progress indicator
  • Notification message
  • Supports TypeScript
  • Super easy to setup
  • Extremely lightweight
  • Super easy to customize
  • And much more !

Step 1: Installation

Install via NPM.

npm install reactive-button

Or via Yarn.

yarn add reactive-button

Step 2: Usage

The targets of the below example:

  • Show a button showing the text 'Submit'.
  • After clicking the button, change the button text to 'Loading' and send an HTTP request.
  • Upon successful request, change the button text to 'Done' as success notification.
import { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
  const [state, setState] = useState('idle');

  const onClickHandler = () => {
    setState('loading');

    // send an HTTP request
    setTimeout(() => {
      setState('success');
    }, 2000);
  };

  return (
    <ReactiveButton
      buttonState={state}
      idleText="Submit"
      loadingText="Loading"
      successText="Done"
      onClick={onClickHandler}
    />
  );
}

export default App;

Other Usage

Reactive Button has all the functionalities of a normal button.

Color

It comes with 10 default color options.

return (
  <>
    <ReactiveButton color="primary" />
    <ReactiveButton color="secondary" />
    <ReactiveButton color="teal" />
    <ReactiveButton color="green" />
    <ReactiveButton color="red" />
    <ReactiveButton color="violet" />
    <ReactiveButton color="blue" />
    <ReactiveButton color="yellow" />
    <ReactiveButton color="dark" />
    <ReactiveButton color="light" />
  </>
);

Size

There are 4 sizes available.

return (
  <>
    <ReactiveButton size="tiny" />
    <ReactiveButton size="small" />
    <ReactiveButton size="medium" />
    <ReactiveButton size="large" />
  </>
);

Style

Make the buttons more beautiful with these customization options.

return (
  <>
    <ReactiveButton outline />
    <ReactiveButton rounded />
    <ReactiveButton shadow />
  </>
);

Existing State

In your project, There might be existing state for loading indicator which accepts boolean value only. If you don't want to define new state for Reactive Button, then utilize the existing state.

const [loading, setLoading] = useState(false);

return (
  <ReactiveButton
    buttonState={loading ? 'loading' : 'idle'}
    idleText={'Button'}
    loadingText={'Loading'}
  />
);

Without State

state is not mandatory.

return <ReactiveButton onClick={onClickHandler} />;

Using Icons

You can use your own icons. Don't forget to wrap them with a parent element.

return (
  <ReactiveButton
    idleText={
      <span>
        <faReply /> Send
      </span>
    }
  />
);

Form Submit

If you need to submit form by button clicking, set the type prop as 'submit'.

return (
  <form>
    <input type="text" name="username" />
    <input type="password" name="password" />
    <ReactiveButton type={'submit'} idleText="Submit" />
  </form>
);

Anchor Tag

To use Reactive button as anchor tag, simply wrap it with an anchor tag.

return (
  <a href="https://github.com/" target="_blank">
    <ReactiveButton idleText="Visit Github" />
  </a>
);

Read more


2. react-progress-button

Simple React component for a circular Progress Button.

Hereis the demo GIF:

Demo

Step 1: Install

npm install react-progress-button --save

Step 2: Example

Controlled usage:

import ProgressButton from 'react-progress-button'

const App = React.createClass({
  getInitialState () {
    return {
      buttonState: ''
    }
  },

  render () {
    return (
      <div>
        <ProgressButton onClick={this.handleClick} state={this.state.buttonState}>
          Go!
        </ProgressButton>
      </div>
    )
  },

  handleClick () {
    this.setState({buttonState: 'loading'})
    // make asynchronous call
    setTimeout(() => {
      this.setState({buttonState: 'success'})
    }, 3000)
  }
})

Source

Using Promises:

If the function passed in via the onClick prop return a Promise or if a promise
is passed as an argument of the loading method,
the component will automatically transition to its success or error
states based on the outcome of the Promise without the need for
external manipulation of state using a ref.

import ProgressButton from 'react-progress-button'

const App = React.createClass({
  render () {
    return (
      <div>
        <ProgressButton onClick={this.handleClick}>
          Go!
        </ProgressButton>
      </div>
    )
  },

  handleClick() {
    return new Promise(function(resolve, reject) {
      setTimeout(resolve, 3000)
    })
  }
});

Read more


3. react-awesome-button

React <AwesomeButton /> UI Component.

react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons. Bundled together with a social share and progress enabled components.

Below is the demo image:

react-awesome-button demo

Here are its key features

  • 60fps 3D animated button
  • Animated progress button
  • Social icons and network specific share methods
  • OnPress ripple effect
  • Look and feel customisable and extendable in two ways: via CSS custom properties or SASS variables and lists (scss config file).
  • Use it with CSSModules or **Plain CSS

Live demo

Checkout the live demo with the CSS customizer at my web portfolio page.

You can run this demo locally on 8080 by cloning this repository and running npm start

Storybook

Checkout the Storybook at my web portfolio page.

Figma File

Import it directly into your Figma project.

You can run the storybook locally on 6006 by cloning this repository and running npm run storybook

Step 1: Installation

npm install --save react-awesome-button

Step 2: Styling with plain CSS and CSS Modules

Plain CSS

import { AwesomeButton } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";

function Button() {
  return <AwesomeButton type="primary">Button</AwesomeButton>;
}

CSS Modules

import { AwesomeButton } from "react-awesome-button";
import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";

function Button() {
  return (
    <AwesomeButton cssModule={AwesomeButtonStyles} type="primary">
      Button
    </AwesomeButton>
  );
}

AwesomeButton rendered with a button tag

Renders the component with a Button tag and an onPress prop called on animation release.
Checkout this example live on the storyboard.

import { AwesomeButton } from "react-awesome-button";
import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";

function Button() {
  return (
    <AwesomeButton
      cssModule={AwesomeButtonStyles}
      type="primary"
      ripple
      onPress={() => {
        // do something
      }}
    >
      Button
    </AwesomeButton>
  );
}

AwesomeButton rendered with an anchor tag

Render the component with an anchor tag setting the href and target attributes.

Checkout this example live on the storyboard.

import { AwesomeButton } from "react-awesome-button";
import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";

function Button() {
  return (
    <AwesomeButton
      cssModule={AwesomeButtonStyles}
      type="primary"
      href="https://google.com"
      target="_blank"
    >
      Button
    </AwesomeButton>
  );
}

AwesomeButton props

Attribute Type Default Description
type string primary Render a specific button type, styled by the .scss type list
size string auto Render a specific button size, styled by the .scss size list
element node null Overwrites the default container element renderer, useful for using it with react-router Link component.
disabled bool false Should render a disabled button
visible bool true Should the button be visible
ripple bool false Should render the animated ripple effect
onPress function null Default click/press function
href string null Forces the button to be rendered on an anchor container and sets the href to the specified value
target string null When used together with href renders an anchor with a specific target attribute

AwesomeButtonProgress basic example

Checkout this example live on the storyboard.

  import { AwesomeButtonProgress } from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

  function Button() {
    return (
      <AwesomeButtonProgress
        cssModule={AwesomeButtonStyles}
        type="primary"
        onPress={next => {
          // do a sync/async task then call next()
        }}
      >
        Button
      </AwesomeButtonProgress>
    );
  }

AwesomeButtonProgress specific props

Being a wrapper on the AwesomeButton component, it accepts its props plus the following ones.

Attribute Type Default Description
loadingLabel string Wait .. Progress button loading label text
resultLabel string Success Progress button success label text
releaseDelay number 500 Delay for releasing the button after the progress animation
fakePress boolean false When set to true triggers a fake button press

AwesomeButtonSocial basic example

Checkout this example live on the storyboard.

  import { AwesomeButtonSocial } from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

  function Button() {
    return (
      <AwesomeButtonSocial
        cssModule={AwesomeButtonStyles}
        type="facebook"
        url="https://caferati.me"
      >
        Button
      </AwesomeButton>
    );
  }

Read more


4. react-circular-progress

ReactJS Circular Progress Button.

ReactJS version of a beautiful SUBMIT Button from Codrops

Demo

Used Mt-SVG Animation Plugin to animate the loading/checkmark/cross.

Steps

Install

  1. Clone the repo
  2. Go into repo folder
  3. Run npm start
  4. Enjoy 🙂

Read more