button

React Component that renders an animated set of 3D UI buttons

Feb 15, 2019
React Component that renders an animated set of 3D UI buttons

React AwesomeButton UI Component

React button component. With a 3D UI, progress, social and share enabled. RAB is a 60fps, light weight, performant, production ready react UI button component.

react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons. Bundled together with a social share and progress enabled components.

theme-set

Key Features

  • 60fps 3D animated button
  • Animated progress button
  • Social icons and network specific share methods
  • OnPress ripple effect
  • Look and feel customisable and extendable in two ways: via CSS custom properties or SASS variables and lists (scss config file).
  • Use it with CSSModules or **Plain CSS

Live demo

Checkout the live demo with the CSS customizer at my web portfolio page.

react-awesome-button-customizer

Storybook

Checkout the Storybook at my web portfolio page.

react-awesome-button-storybook

Installation

npm install --save react-awesome-button

Styling with plain CSS and CSS Modules

Plain CSS

import { AwesomeButton } from "react-awesome-button"; import "react-awesome-button/dist/styles.css"; function Button() { return <AwesomeButton type="primary">Button</AwesomeButton>; }

CSS Modules

import { AwesomeButton } from "react-awesome-button"; import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss"; function Button() { return ( <AwesomeButton cssModule={AwesomeButtonStyles} type="primary"> Button </AwesomeButton> ); }

AwesomeButton rendered with a button tag

Renders the component with a Button tag and an onPress prop called on animation release.
Checkout this example live on the storyboard.

import { AwesomeButton } from "react-awesome-button"; import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss"; function Button() { return ( <AwesomeButton cssModule={AwesomeButtonStyles} type="primary" ripple onPress={() => { // do something }} > Button </AwesomeButton> ); }

AwesomeButton rendered with an anchor tag

Render the component with an anchor tag setting the href and target attributes.

Checkout this example live on the storyboard.

import { AwesomeButton } from "react-awesome-button"; import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss"; function Button() { return ( <AwesomeButton cssModule={AwesomeButtonStyles} type="primary" href="https://google.com" target="_blank" > Button </AwesomeButton> ); }

AwesomeButton props

AttributeTypeDefaultDescription
typestringprimaryRender a specific button type, styled by the .scss type list
sizestringautoRender a specific button size, styled by the .scss size list
elementnodenullOverwrites the default container element renderer, useful for using it with react-router Link component.
disabledboolfalseShould render a disabled button
visiblebooltrueShould the button be visible
rippleboolfalseShould render the animated ripple effect
onPressfunctionnullDefault click/press function
hrefstringnullForces the button to be rendered on an anchor container and sets the href to the specified value
targetstringnullWhen used together with href renders an anchor with a specific target attribute

AwesomeButtonProgress basic example

Checkout this example live on the storyboard.

import { AwesomeButtonProgress } from 'react-awesome-button'; import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss' function Button() { return ( <AwesomeButtonProgress cssModule={AwesomeButtonStyles} type="primary" onPress={next => { // do a sync/async task then call `next()` }} > Button </AwesomeButton> ); }

AwesomeButtonProgress specific props

Being a wrapper on the AwesomeButton component, it accepts its props plus the following ones.

AttributeTypeDefaultDescription
loadingLabelstringWait ..Progress button loading label text
resultLabelstringSuccessProgress button success label text
releaseDelaynumber500Delay for releasing the button after the progress animation
fakePressbooleanfalseWhen set to true triggers a fake button press

AwesomeButtonSocial basic example

Checkout this example live on the storyboard.

import { AwesomeButtonSocial } from 'react-awesome-button'; import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss' function Button() { return ( <AwesomeButtonSocial cssModule={AwesomeButtonStyles} type="facebook" url="https://caferati.me" > Button </AwesomeButton> ); }

AwesomeButtonSocial specific props

Being a wrapper on the AwesomeButton component, it accepts its props plus the following ones.

AttributeTypeDefaultDescription
typestringprimaryRender a specific button type. Bundled with Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp and Google Plus (RIP) types and share methods
iconboolfalseShould render the social icon relative to the button type
iconHeightnumber23Rendered icon height
iconnumber30Rendered icon width
urlstringnullUrl string to be used on the sharer
imagestringnullImage url to be rendered on the sharer
messagestringnullMessage string to be rendered on the share post
phonestringnullPhone number to be used when using the Whatsapp sharer
userstringnullUsername to be redirected to when using the Messenger sharer

GitHub

Recommended