1.1.1 • Published 6 years ago
react-linear-gradient-button v1.1.1
Install
$ npm install react-linear-gradient-buttonUsage
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GradientButton from 'react-linear-gradient-button';
class Basic extends Component {
render() {
return <GradientButton>BUTTON</GradientButton>;
}
}
ReactDOM.render(<Basic />, document.getElementById('root'));Features
- No external CSS file.
- Built with styled-components 💅
Props
| Props | Type | Default | Description |
|---|---|---|---|
| children | String || Node | Required | Content of the button. |
| theme | String | "Vanusa" | Gradient theme from uigradients. |
| disabled | Bool | false | Should render a disabled button. |
| gradient | [String] | null | Array of colors (e.g., ['#f00b47', '#0f6bb6'], [rgba(255,0,0,0), rgba(255,0,0,1)]).NOTE: this props has higher level then theme. |
| angle | String | "right" | The angle or direction of linear gradient (e.g., "bottom", "30deg").Check Using Angles section on w3schools/css3_gradients for more information. |
| padding | Number || String || [Number] || [String] | 10 | The CSS padding argument of the button. Could be an array of four sides, just like CSS.Unit is px. |
| borderRadius | Number | 20 | The CSS border-radius argument of the button.Unit is px. |
| borderWidth | Number | 2 | The CSS border-width argument of the button.Unit is px. |
| background | String | "#fff" | The CSS background-color argument of the button. |
| color | String | "#ae3560" | The CSS color argument of the button. |
| fontSize | Number | 16 | The CSS font-size argument of the button. |
| transition | Object | See following | The CSS transition argument of the button. |
| transition.property | String | "all" | The CSS transition-property argument of the button. |
| transition.duration | Number | 0.2 | The CSS transition-duration argument of the button.Unit is second. |
| transition.timingFunction | String | "ease-in-out" | The CSS transition-timing-function argument of the button. |
| transition.delay | Number | 0 | The CSS transition-delay argument of the button.Unit is second. |
License
MIT © xxhomey19