react-custom-gradient-button

Introduction

react-custom-gradient-button is a very light custom gradient button component for the react.

The main purpose of this library implement custom gradient buttons easily.

Examples

with props

import GradientButton from "react-custom-gradient-button"

<GradientButton
  color="white"
  start="#aa076b"
  middle="#61045f"
  end="#aa076b"
  borderRadius="0.5rem"
  width="5rem"
  height="2rem"
  onClick={() => {
    console.log('!Clicked');
  }}
>
  Click Me
</GradientButton>

without style props

import GradientButton from "react-custom-gradient-button"

<GradientButton
  onClick={() => {
    console.log('!Clicked');
  }}
>
  Click Me
</GradientButton>

Installation

pnpm (recommended)

pnpm install react-custom-gradient-button

npm

npm install react-custom-gradient-button

yarn

yarn add react-custom-gradient-button

API

Prop	Type	Description
className	string	custom classes can be added.
color	string	button text color.
start	string	left background color of button.
middle	string	middle background color of button may initilize with "" .
end	string	end background color of button.
borderRadius	string	end background color of button.
width	string	width of button.
height	string	height of button.
...props	func	you can add also custom props like onClick

License

MIT

Copyright (c) 2022 Emre Çil.