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 awesome-button.caferati.me.

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 HTML tag and an onPress prop called on animation release.

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

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

AwesomeButton rendered with an anchor tag

Render the component with an anchor HTML tag setting the href attribute.

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">
      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	Render the disabled button
visible	bool	true	Toggle button visibility
ripple	bool	false	Sets up the button with the onPress ripple effect
placeholder	bool	true	Should render the animated placeholder on empty children
onPress	function	null	Default pressRelease event function
onPressed	function	null	Event function triggered only on full button press
onReleased	function	null	Event function triggered on button full animation release
onMouseDown	function	null	Event function coupled with the element's onMouseDown
onMouseUp	function	null	Event function coupled with the element's onMouseUp
href	string	null	Forces the button to be rendered on an anchor container and sets the href to the specified value
className	string	null	Adds a className to the button container element
style	object	null	Passes a style object to the container element
containerProps	object	null	Exposes an option for freely adding props to the button container element
cssModule	object	null	Accepts a css module configuration from the themed module.scss files
target	string	null	When used together with href renders an anchor with a specific target attribute
before	React.Node	null	Render a node before the main content span container; useful for setting icons
after	React.Node	null	Render a node after the main content span container; useful for setting icons
between	string	null	Sets the content elements relation to space-between; useful for setting icons
active	bool	false	When set to true activates the pressIn animation

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={(event, release) => {
        // do a sync/async task then call `release()`
      }}>
      Button
    </AwesomeButtonProgress>
  );
}

AwesomeButtonProgress specific props

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

Attribute	Type	Default	Description
onPress	function	null	Default onPress function returning the event and a button release strategy
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

AwesomeButtonSocial basic example

If nothing is passed on the sharer prop, the component automatically gets the page's own title and og:image properties; otherwise, it's setup by the sharer.

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

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

AwesomeButtonSocial whatsapp example

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

  function Button() {
    return (
      <AwesomeButtonSocial
        cssModule={AwesomeButtonStyles}
        type="whatsapp"
        sharer={{
          phone: '############',
          message: 'Whatsapp init message'
        }}
      >
        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	null	Render a button type (Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp)
icon	bool or Dimensions	true	Setting to false avoids icon rendering; if the dimensions type is passed in {width: number, height: number}, configures the button size
sharer.url	string	null	Url string to be used on the sharer
sharer.image	string	null	Image url to be rendered on the sharer
sharer.message	string	null	Message string to be rendered on the shared post
sharer.phone	string	null	Phone number to be used when using the Whatsapp sharer type
sharer.user	string	null	Username to be redirected when using the Messenger sharer type

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

License

MIT. Copyright (c) 2019 Rafael Caferati.