react-opium-button
A light-weight react button with inline state indicator.
Features
- Automatically generates a darker color from a given solid or gradient color for the hover/focus effect
- Hover color can also be provided manually
- Loading indicators with SVG animations
- Optional different text while loading
- Success indicator
Installation
npm i react-opium-button
Usage
Basic example
import React, { Component } from 'react';
import Button from 'react-opium-button';
import 'react-opium-button/style.css';
class App extends Component {
contructor(props) {
super(props);
this.state = { buttonState: 'normal' };
}
handleClick() {
console.log('button clicked');
}
render() {
return (
<div style={{ margin: '200px auto', maxWidth: '400px' }}>
<Button
text="Save"
padding="10px 50px"
background="#ee0979"
color="#ffffff"
state={this.state.buttonState}
onClick={this.handleClick} />
</div>
);
}
}
export default App;Advanced usage
Extend the plugin to make your own settings as default.
// ./myModifiedButton.js
import Button from 'react-opium-button';
class myModifiedButton extends Button {
static defaultProps = {
background: '#ff0000',
color: '#2e2e2e',
dimensions: '100px 40px',
border: '2px solid #ff0000',
rounded: true
}
}
export default myModifiedButton;Customizations
| Prop | Type | Default | Description |
|---|---|---|---|
text |
String | Click me! | Button text |
background |
String | #e8eaeb |
Background color of the button. It can be solid or gradient color with hex values. It automatically calculates a darker color for hover effect, however, you can also specify a hover color with a '|' separator, e.g. '#ff0000|#000000' |
color |
String | #2e2e2e |
Text color, should be a hex value, optionally specify hover color as '#ff0000|#000000' |
dimensions |
String | auto auto |
If the button needs to be of specific width or height, e.g. 150px 30px
|
padding |
String | 5px |
CSS padding e.g. 10px 50px
|
border |
String | none |
CSS border e.g. 2px solid #e2e3e5
|
radius |
Number | 0 |
Border radius |
full |
Boolean | false |
Occupies full width if set true
|
rounded |
Boolean | false |
Makes the button corners rounded |
state |
String | normal |
Button state: normal, loading or success
|
loaderType |
String | circle | Loading animation type, it can be set as circle, dots, ripple, disk or gooey
|
loadingText |
String | null |
If set, it will show this text in place of loading animation |
onClick |
Function | - | onClick handler |