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.

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

Installation

npm install --save react-awesome-button

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

`AwesomeButtonSocial` specific props

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

Attribute	Type	Default	Description
type	`string`	`primary`	Render a specific button type. Bundled with Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp and Google Plus (RIP) types and share methods
icon	`bool`	`false`	Should render the social icon relative to the button type
iconHeight	`number`	`23`	Rendered icon height
icon	`number`	`30`	Rendered icon width
url	`string`	`null`	Url string to be used on the sharer
image	`string`	`null`	Image url to be rendered on the sharer
message	`string`	`null`	Message string to be rendered on the share post
phone	`string`	`null`	Phone number to be used when using the Whatsapp sharer
user	`string`	`null`	Username to be redirected to when using the Messenger sharer

Adding Custom Button Colors

There are two ways to accomplish this. Which one is easier might depend on your specific use case.

Method 1: Add a New Button Type

This works well if you expect to re-use the same color over and over again.

You can but an arbitrary string in the type attribute, e.g. <AwesomeButton type="plain">Button</AwesomeButton>. The generated HTML will create an element with CSS class name aws-btn--plain.

You can then create a bunch of CSS rules that will style the color for that button. There's a good reference commit illustrating how to do that in https://github.com/michael616kriel/react-awesome-button/commit/2ccbfd6e82d70f1d14568c8fcc3e85aeff9eeb36 but it'll look something like this:

.aws-btn {
  --button-plain-color: #ffffff;
  --button-plain-color-dark: #1360a4;
  --button-plain-color-light: #1E88E5;
  --button-plain-color-hover: #f2f2f2;
  --button-plain-color-active: #e6e6e6;
  --button-plain-border: 2px solid #1E88E5;
}
.aws-btn--plain .aws-btn__wrapper:before {
  background: var(--button-plain-color-dark);
}
.aws-btn--plain .aws-btn__content {
  background: var(--button-plain-color);
  color: var(--button-plain-color-light);
  border: var(--button-plain-border);
}
.aws-btn--plain .aws-btn__content path {
  fill: var(--button-plain-color-light);
}
.aws-btn--plain .aws-btn__wrapper:hover .aws-btn__content {
  background: var(--button-plain-color-hover);
}
.aws-btn--plain.aws-btn--active .aws-btn__wrapper .aws-btn__content {
  background: var(--button-plain-color-active);
}

Method 2: Use Inline CSS to Override the Colors

This works well if you have a single button whose color you want to be a special color.

You can use the style attribute to provide arbitrary CSS overrides, and in particular, you can override the color variables used by the system. It would look something like this:

<AwesomeButton type="secondary" style={{
  '--button-secondary-color': "#ff8585",
  '--button-secondary-color-dark': "#722222",
  '--button-secondary-color-light': "#4b1616",
  '--button-secondary-color-hover': "#ff0000",
  '--button-secondary-color-active': "#ff0505",
}}>Button</AwesomeButton>

React Native Version

Checkout the React Native version of the Awesome Button UI Component at rcaferati/react-native-really-awesome-button

Author

Rafael Caferati

Checkout my Full-Stack Web Developer Website
Other open source projects @ Code Laboratory
A scope of my work @ Web Developer Portfolio

NebuPookins/react-awesome-button

React <AwesomeButton /> UI Component

Key Features

Live demo

Storybook

Figma File

Installation

Styling with plain CSS and CSS Modules

Plain CSS

CSS Modules

`AwesomeButton` rendered with a button tag

`AwesomeButton` rendered with an anchor tag

`AwesomeButton` props

`AwesomeButtonProgress` basic example

`AwesomeButtonProgress` specific props

`AwesomeButtonSocial` basic example

`AwesomeButtonSocial` specific props

Adding Custom Button Colors

Method 1: Add a New Button Type

Method 2: Use Inline CSS to Override the Colors

React Native Version

Author

Rafael Caferati

License

NebuPookins/react-awesome-button

React <AwesomeButton /> UI Component

Key Features

Live demo

Storybook

Figma File

Installation

Styling with plain CSS and CSS Modules

Plain CSS

CSS Modules

AwesomeButton rendered with a button tag

AwesomeButton rendered with an anchor tag

AwesomeButton props

AwesomeButtonProgress basic example

AwesomeButtonProgress specific props

AwesomeButtonSocial basic example

AwesomeButtonSocial specific props

Adding Custom Button Colors

Method 1: Add a New Button Type

Method 2: Use Inline CSS to Override the Colors

React Native Version

Author

Rafael Caferati

License

`AwesomeButton` rendered with a button tag

`AwesomeButton` rendered with an anchor tag

`AwesomeButton` props

`AwesomeButtonProgress` basic example

`AwesomeButtonProgress` specific props

`AwesomeButtonSocial` basic example

`AwesomeButtonSocial` specific props