react-awesome-button

<AwesomeButton />

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

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

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

License

MIT. Copyright (c) 2017 Rafael Caferati.