# or-button

Latest version **1.1.1** (published 2018-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install or-button
pnpm add or-button
yarn add or-button
bun add or-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.1.1 |
| Published | 2018-11-21 |
| First published | 2017-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | foryuki |
| Maintainers | yukiz |

## Links

- npm: https://www.npmjs.com/package/or-button
- Repository: https://github.com/one-react/button
- Homepage: https://github.com/one-react/button#readme
- Issues: https://github.com/one-react/button/issues
- npm.io page: https://npm.io/package/or-button

## Dependencies (3)

- [or-theme](https://npm.io/package/or-theme.md) ^1.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.1.2

## Recent versions

- 1.1.1 (latest) — 2018-11-21
- 1.1.0 — 2018-11-04
- 0.3.0 — 2018-11-04
- 0.2.0 — 2018-11-04
- 0.1.0 — 2018-09-16
- 0.0.3 — 2017-12-17
- 0.0.2 — 2017-12-17
- 0.0.1 — 2017-12-17

## README

# One React Component: button

<p align="center"><img width="150" src="https://cdn.rawgit.com/one-react/assets/master/logo%402x.png" alt="logo"></p>

[![TravisCI Build](https://img.shields.io/travis/one-react/button.svg)](https://travis-ci.org/one-react/button)
[![CircieCI Build](https://img.shields.io/circleci/project/github/one-react/button.svg)](https://circleci.com/gh/one-react/button)
[![Coverage](https://img.shields.io/codecov/c/github/one-react/button.svg)](https://codecov.io/gh/one-react/button) 
[![Version](https://img.shields.io/npm/v/or-button.svg)](https://www.npmjs.com/package/or-button)
[![Chat](https://img.shields.io/gitter/room/one-react-org/Lobby.svg)](https://gitter.im/one-react-org/Lobby)
[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Greenkeeper badge](https://badges.greenkeeper.io/one-react/button.svg)](https://greenkeeper.io/) 

## Installation
```
// with npm
npm install or-button

// with yarn
yarn add or-button
```

## Usage
- Config webpack `sass-loader` if you are using webpack.

```js
// webpack.config.js
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ],
  include: [
    /node_modules\/or\-\w+/ //include or-components
  ]
}
```

## Basic Example

```jsx
import Button from 'or-button'

<Button className="hello" type="primary" onClick={handleClick}>ADD TO CART</Button>
<Button type="warning" size="small" onClick={handleClick}>DELETE</Button>
```

## API

```ts
interface Props {
  /**
   * type for button
   * @default 'default'
   **/
  type?: 'primary' | 'warning'
  /**
   * size for button
   * @default 'default'
   **/
  size?: 'large' | 'small'
  /**
   * whether the button can be clicked
   **/
  disabled?: boolean
  /**
   * custom className
   **/
  className?: string
  /**
   * callback triggered button click
   **/
  onClick?: () => void
}
```

## Customize Theme
**Customize in webpack**

The following variables in or-button can be overridden:

```scss
$or-btn-primary-color: $or-primary-color !default;
$or-btn-warning-color: $or-warning-color !default;
$or-btn-disabled-color: $or-disabled-color !default;
$or-btn-default-color: $or-gray8 !default;
...
```
For more variables, see [here](https://github.com/one-react/button/blob/master/src/styles.scss).

Alternatively, you can override variables from [or-theme](https://github.com/one-react/theme/blob/master/src/variables.scss) to keep all or-components in a unified theme style.

First you should create a `theme.scss` file to declare the variables you want to override.

Then use the [data](https://github.com/webpack-contrib/sass-loader#environment-variables)  option provided by `sass-loader` to override the default values of the variables.

We take a typical `webpack.config.js` file as example to customize it's sass-loader options.

```js
// webpack.config.js
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        data: fs.readFileSync(path.resolve(__dirname, 'theme.scss')) // pass theme.scss to sass-loader
      }
    }
  ],
  include: [
    /node_modules\/or\-\w+/ //include or-components
  ]
}
```

## Demos and Docs
> powered by [storybook](https://storybook.js.org/)

[Click Here](https://one-react.github.io/button)

## License

MIT &copy; foryuki

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