<AwesomeButton />

 !NPM

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

$3

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

function Button() {
return (
Button
);
}
`

$3

`jsx
import { AwesomeButton } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

function Button() {
return (
cssModule={AwesomeButtonStyles}
type="twitter"
>
Share

);
}
`

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.