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.