React Awesome Button Component

Installation

.sh
npm install --save react-awesome-button

Multiple Import

.jsx
import { AwesomeButton, AwesomeButtonProgress, AwesomeButtonSocial, } from 'react-awesome-button';

Single Import

.jsx
import AwesomeButton from 'react-awesome-button/src/components/AwesomeButton'; import AwesomeButtonProgress from 'react-awesome-button/src/components/AwesomeButtonProgress'; import AwesomeButtonSocial from 'react-awesome-button/src/components/AwesomeButtonSocial';

Primary Button

.jsx
<AwesomeButton type="primary">Primary</AwesomeButton>

Secondary Progress Button

.jsx
<AwesomeButtonProgress type="secondary" size="medium" action={(element, next) => doSomethingThenCall(next)} > Primary </AwesomeButtonProgress>

Multiple Sizes

.jsx
<AwesomeButton size="icon" type="primary" > <i className="fa fa-codepen" /> </AwesomeButton> <AwesomeButton size="small" type="primary" > Small </AwesomeButton> <AwesomeButton size="small" type="primary" > Medium </AwesomeButton> <AwesomeButton size="small" type="primary" > Large </AwesomeButton>

Styling with - CSS

For styling with CSS you can access all themes on the /dist folder and append it via <link> or import into your .js or .css files.

.jsx
import 'react-awesome-button/dist/themes/theme-blue.css';

Styling with - CSS Modules

For styling it through CSS Modules, import the file from the themes folder inside the src. You'll need a .scss loader in place in order to build it.

.jsx
import AwesomeButton from 'react-awesome-button/src/components/AwesomeButton'; import styles from 'react-awesome-button/src/styles/themes/theme-blue'; ... function Component() { return ( <AwesomeButton cssModule={styles} type="primary" > Primary Blue Themed Button </AwesomeButton> ); }