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:
Pass the butter.
← 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.
- 48px
- 14px
- 6px
- 20px
- 5px
- 2
- .185s
- #a9d3e9
- #58a9d4
- #2e84b2
- #95c9e4
- none
- #fafafa
- #67cbc3
- #349890
- #ecf9f8
- 2px solid #b3e5e1
- #95d44a
- #52a934
- #3f8228
- #89cf35
- 2px solid #5bbd3a