@codeproductive/styled-buttons

Styled Button Component for React

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

Example

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.