# rsba-button

> Made with create-react-library

Latest version **1.0.1** (published 2020-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install rsba-button
pnpm add rsba-button
yarn add rsba-button
bun add rsba-button
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-12-18 |
| First published | 2020-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 61.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Feujo |
| Maintainers | feujo |

## Links

- npm: https://www.npmjs.com/package/rsba-button
- Repository: https://github.com/Feujo/rsba-button
- npm.io page: https://npm.io/package/rsba-button

## Dependencies (2)

- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.2
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2

## Recent versions

- 1.0.1 (latest) — 2020-12-18
- 1.0.0 — 2020-12-18
- 0.0.5 — 2020-12-18
- 0.0.4 — 2020-12-16
- 0.0.3 — 2020-12-16
- 0.0.2 — 2020-12-08
- 0.0.1 — 2020-12-05

## README

# rsba-button

> customization of button component

[![NPM](https://img.shields.io/npm/v/rsba-button.svg)](https://www.npmjs.com/package/rsba-button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save rsba-button
```
```bash
yarn add rsba-button
```

## Usage

```tsx
import { Icon } from '@material-ui/core'
import React from 'react'

import  Button from 'rsba-button'
import 'rsba-button/dist/index.css'

const App = () => {
  const handleClick = () => {
    let myPromise = new Promise(function(myResolve, myReject) {
    let x = 0;
      if (x == 1) {
        myResolve("OK");
      } else {
        myReject("Error");
      }
    });
    
    myPromise.then(
      function(value) {console.log(value)},
      function(error) {console.log(error)}
    );
  }
  return <Button onClick={handleClick}
  type="button"
  color="btn-red"
  size="btn-small"
  icon={<Icon color="inherit" style={{marginLeft: "10px", marginRight: "10px"}} onClick={() => {}}>calendar_today</Icon>}
  img={<Icon color="inherit" style={{marginRight: "10px"}} onClick={() => {}}>format_align_right</Icon>}>Button</Button>
}

export default App

```

## explaination color

when we use color, use choose on the followings ways. we must prefix with 
> btn-
```css
  {background-color: #4CAF50;} /* green  */
  {background-color: #008CBA;} /* blue  */
  {background-color: #f44336;} /* red */
  {background-color: #e7e7e7;} /* gray */
  {background-color: #555555;} /* black */
```

## Size
three sizes are available : large, medium, small

## other
```js
const COLOR = [
    "btn-green",
    "btn-blue",
    "btn-red",
    "btn-gray",
    "btn-black"
]
const SIZES = [
    "btn-medium",
    "btn-small",
    "btn-large"
]
```

## License

MIT © [Feujo](https://github.com/Feujo)

---
_Source: https://npm.io/package/rsba-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._