Best ReactJS Progress Button Components

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>
);

Simple React component for a circular Progress Button.

Hereis the demo GIF:

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)
    })
  }
});

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:

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>
    );
  }

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

Clone the repo
Go into repo folder
Run npm start
Enjoy 🙂