react-awesome-button

<ReactAwesomeButton />

ReactAwesomeButton is a performant, extendable, highly customisable, production ready React Component that renders an animated set of UI buttons.

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

Live demo and examples

• On my portfolio
• Live code at Webpackbin

Examples

With plain CSS

  import AwesomeButton from 'react-awesome-button';
  import 'react-awesome-button/dist/styles.css';
  
  function Button() {
    return (
      <AwesomeButton>Primary Button</AwesomeButton>
    );
  }
  

With CSS Modules

  import AwesomeButton from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss'
  
  function Button() {
    return (
      <AwesomeButton
        cssModule={AwesomeButtonStyles}
      >Primary Button</AwesomeButton>
    );
  }
  

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

License

MIT. Copyright (c) 2017 Rafael Caferati.