georgelima / react-awesome-button

🖥️📱ReactJS 60fps light weight performant component that renders a animated set of progress and social share enabled 3D UI buttons.

Home Page:https://caferati.me/demo/react-awesome-button

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

<AwesomeButton />

Travis NPM

react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons.

react-awesome-button demo

Live demo

Checkout the CSS customizer at my portfolio

Examples

With react-awesome-button and plain CSS

  import { AwesomeButton } from 'react-awesome-button';
  import 'react-awesome-button/dist/styles.css';

  function Button() {
    return (
      <AwesomeButton type="facebook">Button</AwesomeButton>
    );
  }

With react-awesome-button 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="twitter"
      >
        Share
      </AwesomeButton>
    );
  }

Key Features

  • Look and feel customisable and extendable via SASS variables and lists (scss config file)
  • Use it with CSSModules or Plain CSS (NO inline-styles)
  • Render any tag as the component's child (text, icon, img, svg)
  • Animated progress button
  • OnClick bubble animation
Attributes Type Default Description
action function null Default click function
bubbles bool false Should render the bubbles onClick animation
disabled bool false Should render a disabled button
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 container.
href string null Forces the button to be rendered on an anchor container and sets the href to the specified value
target string null Render an anchor with a specific target attribute
progress bool false Should render a progress button
loadingLabel string Wait .. Progress button loading label text
errorLabel string Error Progress button error label text
successLabel string Success Progress button success label text
visible bool true Should the button be visible

Author

Rafael Caferati

License

MIT. Copyright (c) 2017 Rafael Caferati.

About

🖥️📱ReactJS 60fps light weight performant component that renders a animated set of progress and social share enabled 3D UI buttons.

https://caferati.me/demo/react-awesome-button

License:MIT License


Languages

Language:CSS 55.2%Language:JavaScript 44.8%