rat-button/README.md

button component for Rax.

# rat-button
# Button

[![Build Status][ci-img]](ci-url)
[![tnpm status][tnpm-img]](tnpm-url)
[![tnpm download][tnpm-download-img]](tnpm-url)
[![line coverage][line-coverage-img]][ci-url]
[![branch coverage][branch-coverage-img]][ci-url]
![preact][preact-img]

[tnpm-url]: http://web.npm.alibaba-inc.com/package/rat-button

[tnpm-img]: http://web.npm.alibaba-inc.com/badge/v/rat-button.svg?style=flat-square

[tnpm-download-img]: http://web.npm.alibaba-inc.com/badge/d/rat-button.svg?style=flat-square

[ci-url]: http://cise.alibaba-inc.com/task/384448

[ci-img]: http://cise.alibaba-inc.com/task/384448/status.svg

[line-coverage-img]: http://cise.alibaba-inc.com/task/384448/ut_line_coverage.svg

[branch-coverage-img]: http://cise.alibaba-inc.com/task/384448/ut_branch_coverage.svg

[preact-img]: http://git.cn-hangzhou.oss-cdn.aliyun-inc.com/uploads/next/table/83b76bed7f9aa225c3d62e9a036d4f13/preact.png

-   category: Components
-   chinese: 按钮
-   type: 表单

---

按钮用于开始一个即时操作。

## Guide

### 何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

## API

### Button

| 参数        | 说明                                                                                                           | 类型       | 默认值      |
| --------- | ------------------------------------------------------------------------------------------------------------ | -------- | -------- |
| size      | 按钮的尺寸<br><br>**可选值**:<br>'small', 'medium', 'large'  | Enum     | 'medium' |
| type      | 按钮的类型<br><br>**可选值**:<br>'primary', 'secondary', 'normal'                                                    | Enum     | 'normal' |
| htmlType  | 当 component = 'button' 时，设置 button 标签的 type 值<br><br>**可选值**:<br>'submit', 'reset', 'button'                 | Enum     | 'button' |
| component | 设置标签类型<br><br>**可选值**:<br>'button', 'a'  | Enum     | 'button' |
| loading   | 设置按钮的载入状态           | Boolean  | false    |
| text      | 是否为文本按钮  | Boolean  | false    |
| warning   | 是否为警告按钮  | Boolean  | false    |
| disabled  | 是否禁用   | Boolean  | false    |
| onClick   | 点击按钮的回调<br><br>**签名**:<br>Function(e: Object) => void<br>**参数**:<br>_e_: {Object} Event Object               | Function | () => {} |


## demo

```
import Button from 'rat-button';

class App extends React.Component {
    // ajax还要tools比较通用，所以从根组件使用context传入，避免props逐层传入
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Button 
          style={{width: 150, height: 50}}
        >
          submit
        </Button>
      </div>
      )
    }
}
```