# Button

按钮组件

- 按钮组件提供所有properties中内置的颜色及字体大小样式供选择。
- 也可以自定义行内样式和className名字定义UI展示。
- 通过phSize设置大小, 可选sm、md、lg。
- 通过phStyle选择按钮颜色，可选primary、info、error、warning、danger、link、gray、success。
- 支持disabled, active属性定义。

主要属性和接口：

- phSize:按钮大小, 默认sm
  如: `<Button phSize="lg">button</Button>`
- phStyle:按钮颜色, 默认primary
  如: `<Button phStyle="info">button</Button>`
- block:是否块级显示，默认false
  如: `<Button block>button</Button>`

### 方法

### 属性

- active
- block
- classPrefix
- componentTag
- disabled
- hollow
- phSize
- phStyle
- radius

### 事件

Extends Component
Defined in: `src/Button.js:6`
Module: 基础组件

Available since 0.1.0

## Constructor

### Button

`Button ()`

Defined in `src/Button.js:6`

Available since 0.1.0

#### Example:

    import React, { Component } from "react";
    import {Button} from "phoenix-ui";
    import Code from "./code/code";

    export default class button extends Component{
        render(){
            return(
                <div>
                    <h2 className="comp-title">Button</h2>
                    <h3 className="comp-type">phSize(默认sm) 按钮大小</h3>
                    <div className="content">
                        <Button>默认sm</Button>
                        <Button phSize="md">md</Button>
                        <Button phSize="lg">lg</Button>
                    </div>
                    <Code target="button-phsize" />

                    <h3 className="comp-type">phStyle(默认primary) 按钮颜色</h3>
                    <div className="content">
                        <Button>默认Primary</Button>
                        <Button phStyle="info">Info</Button>
                        <Button phStyle="success">Success</Button>
                        <Button phStyle="error">Error</Button>
                        <Button phStyle="danger">Danger</Button>
                        <Button phStyle="warning">Warning</Button>
                        <Button phStyle="gray">Gray</Button>
                        <Button phStyle="link">Link</Button>
                    </div>
                    <Code target="button-phstyle" />

                    <h3 className="comp-type">hollow属性</h3>
                    <div className="content">
                        <Button hollow>hollow</Button>
                    </div>
                    <Code target="button-phstyle" />

                    <h3 className="comp-type">block属性</h3>
                    <div className="content">
                        <Button block>block</Button>
                    </div>
                    <Code target="button-block" />

                    <h3 className="comp-type">disabled属性</h3>
                    <div className="content">
                        <Button disabled>disabled</Button>
                    </div>
                    <Code target="button-disabled" />

                    <h3 className="comp-type">active属性</h3>
                    <div className="content">
                        <Button active>active</Button>
                    </div>
                    <Code target="button-active" />

                    <h3 className="comp-type">phIcon属性</h3>
                    <div className="content">
                        <Button phIcon="search">phIcon</Button>
                    </div>
                    <Code target="button-phicon" />
                </div>
            );
        }
    }

## 属性

### `active`

Boolean

Defined in `src/Button.js:88`

激活状态

Default:

`false`

### `block`

Boolean

Defined in `src/Button.js:60`

块级显示

Default:

`false`

### `classPrefix`

String

Defined in `src/Button.js:47`

样式前缀

Default:

`'button'`

### `componentTag`

String

Defined in `src/Button.js:54`

标签tagName

### `disabled`

Boolean

Defined in `src/Button.js:81`

不可点状态

Default:

`false`

### `hollow`

Boolean

Defined in `src/Button.js:74`

空背景

Default:

`false`

### `phSize`

String

Defined in `src/Button.js:33`

按钮尺寸[sm、md、lg], 默认为sm

Default:

`'sm'`

### `phStyle`

Boolean

Defined in `src/Button.js:40`

按钮颜色[primary、warning、danger、info、error、success、link、gray], 默认primary

Default:

`'primary'`

### `radius`

Boolean

Defined in `src/Button.js:67`

圆角

Default:

`false`