ReactAwesome Button

<AwesomeButton/>~6KB compressed

React AwesomeButton is a performant, extendable, highly customisable, production ready javascript react component that renders an animated basic set of UI buttons.

Select a theme:

Blue Theme

← Set Data
← Toggle

Installation

.sh

npm install --save react-native-awesome-button

Multiple Import

.jsx

import { AwesomeButton, AwesomeButtonProgress, AwesomeButtonShare, } from 'react-awesome-button';

Single Import

.jsx

import AwesomeButton from 'react-awesome-button/src/components/AwesomeButton';

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

Basic customization through CSS custom-properties.

Source

    General

    Animations

    Primary

    Secondary

    Anchor

Avatar