Naughty Program Manipulator
Miss any of our Open RFC calls?Watch the recordings here! »

react-linear-gradient-button

1.1.1 • Public • Published


react-linear-gradient-button

React linear gradient button component

code style: prettier

DEMO

Install

$ npm install react-linear-gradient-button

Usage

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

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

Install

npm i react-linear-gradient-button

DownloadsWeekly Downloads

4

Version

1.1.1

License

MIT

Unpacked Size

39.3 kB

Total Files

6

Last publish

Collaborators

  • avatar