@codeproductive/styled-buttons

1.0.5 • Public • Published

@codeproductive/styled-buttons

npm version

Styled Button Component for React

A customizable button component for React that supports different styles and types.

Example

image

Installation

npm install @codeproductive/styled-buttons
yarn add @codeproductive/styled-buttons

Usage

import { Button } from "@codeproductive/styled-buttons";

function App() {
  return (
    <div>
      <Button primary onClick={() => console.log("hi")}>
        Log
      </Button>
      <Button danger outline rounded>
        Delete
      </Button>
    </div>
  );
}

export default App;

API

Props

The component accepts the following props:

  • rounded (boolean): Makes the button corners rounded.
  • outline (boolean): Renders the button with an outline style.

One of the following for color:

  • primary (boolean): Sets the color to blue blue (rgb(59 130 246), #3B82F6)
  • secondary (boolean): Sets the color to black black (rgb(17 24 39), #111827)
  • success (boolean): Sets the color to green green (rgb(34 197 94), #22C55E)
  • warning (boolean): Sets the color to yellow yellow (rgb(250 204 21), #FACC15)
  • danger (boolean): Sets the color to red red (rgb(239 68 68), #EF4444)

All standard element and button elements such as className, style and on onClick etc.

Notes

Only one type flag (primary, secondary, success, warning, danger) can be specified at a time.

Package Sidebar

Install

npm i @codeproductive/styled-buttons

Weekly Downloads

3

Version

1.0.5

License

ISC

Unpacked Size

5.28 kB

Total Files

5

Last publish

Collaborators

  • fuzzalicious