React Awesome Button Component

<AwesomeButton/>~6KB compressed

React button component rendering 3D, progress, social and share enabled buttons. React Awesome Button is a 60fps, light weight, performant, production ready set of react UI button components.

Select a theme:

Get your shit together.

← Set Data
← Toggle

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> ); }

Custom Properties

Button customization through CSS custom-properties.

Source

    General

    Animations

    Primary

    Secondary

    Anchor

Avatar