Home

Awesome

React <AwesomeButton /> UI Component

Travis NPM

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.

<img width="480" alt="react-awesome-button demo" src="https://caferati.me/images/awesome-button.gif">

Key Features

Live demo

Checkout the live demo with the CSS customizer at <a title="React Awesome Button - CSS Customizer" href="https://awesome-button.caferati.me/" target="_blank">awesome-button.caferati.me</a>.

<img src="https://caferati.me/images/github/awesome-button-web.png" width="800" />

Figma File

Import it directly into your Figma project.

<img src="https://caferati.me/images/github/figma-awesome-button.png" width="800" />

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

AttributeTypeDefaultDescription
typestringprimaryRender a specific button type, styled by the .scss type list
sizestringautoRender a specific button size, styled by the .scss size list
elementnodenullOverwrites the default container element renderer, useful for using it with react-router Link component.
disabledboolfalseRender the disabled button
visiblebooltrueToggle button visibility
rippleboolfalseSets up the button with the onPress ripple effect
placeholderbooltrue Should render the animated placeholder on empty children
onPressfunctionnullDefault pressRelease event function
onPressedfunctionnullEvent function triggered only on full button press
onReleasedfunctionnullEvent function triggered on button full animation release
onMouseDownfunctionnullEvent function coupled with the element's onMouseDown
onMouseUpfunctionnullEvent function coupled with the element's onMouseUp
hrefstringnullForces the button to be rendered on an anchor container and sets the href to the specified value
classNamestringnullAdds a className to the button container element
styleobjectnullPasses a style object to the container element
containerPropsobjectnullExposes an option for freely adding props to the button container element
cssModuleobjectnullAccepts a css module configuration from the themed module.scss files
targetstringnullWhen used together with href renders an anchor with a specific target attribute
beforeReact.NodenullRender a node before the main content span container; useful for setting icons
afterReact.NodenullRender a node after the main content span container; useful for setting icons
betweenstringnullSets the content elements relation to space-between; useful for setting icons
activeboolfalseWhen 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.

AttributeTypeDefaultDescription
onPressfunctionnullDefault onPress function returning the event and a button release strategy
loadingLabelstringWait ..Progress button loading label text
resultLabelstringSuccess!Progress button success label text
releaseDelaynumber500Delay 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.

AttributeTypeDefaultDescription
typestringnullRender a button type (Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp)
iconbool or DimensionstrueSetting to false avoids icon rendering; if the dimensions type is passed in {width: number, height: number}, configures the button size
sharer.urlstringnullUrl string to be used on the sharer
sharer.imagestringnullImage url to be rendered on the sharer
sharer.messagestringnullMessage string to be rendered on the shared post
sharer.phonestringnullPhone number to be used when using the Whatsapp sharer type
sharer.userstringnullUsername 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

<img width="280" src='https://caferati.me/images/demo-button-cartman.gif' />

Author

Rafael Caferati

License

MIT. Copyright (c) 2019 Rafael Caferati.