---
title: 按钮
title_en: button
category: 2
---

```jsx
import { Button } from 'parkball'
import { Row, Col, Menu, Icon, Dropdown } from 'parkball'

function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">1st menu item</Menu.Item>
    <Menu.Item key="2">2nd menu item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

class Demo extends React.Component {
  render() {
    return (
      <section>
        <Row>
          <Col offset={1} span={6}>主按钮</Col>
          <Col span={6}>次按钮</Col>
          <Col span={6}>更次按钮</Col>
          <Col span={3}>危险按钮</Col>
          <Col span={2}>失效按钮</Col>
        </Row>
        <Row>
          <Col span={1}>
            小号
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='primary' size='small'>主按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='primary' size='small'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='primary' size='small' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='secondary' size='small'>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary' size='small'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary' size='small' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button size='small'>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button size='small'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button size='small' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={3}>
            <Button type='danger' size='small'>危险按钮</Button>
          </Col>
          <Col span={2}>
            <Button disabled size='small'>失效按钮</Button>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col span={1}>
            常规
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='primary'>主按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='primary'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='primary' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='secondary'>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={3}>
            <Button type='danger'>危险按钮</Button>
          </Col>
          <Col span={2}>
            <Button disabled>失效按钮</Button>
          </Col>
        </Row>
        <br/>
        <Row>
          <Col span={1}>
            大号
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='primary' size='large'>主按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='primary' size='large'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='primary' size='large' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button type='secondary' size='large'>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary' size='large'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button type='secondary' size='large' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row>
              <Col span={8}>
                <Button size='large'>次按钮</Button>
              </Col>
              <Col span={8}>
                <Button size='large'><Icon type="save" />上传</Button>
              </Col>
              <Col span={8}>
                <Button size='large' shape='circle' icon='save' />
              </Col>
            </Row>
          </Col>
          <Col span={3}>
            <Button type='danger' size='large'>危险按钮</Button>
          </Col>
          <Col span={2}>
            <Button disabled size='large'>失效按钮</Button>
          </Col>
        </Row>
        <br/>
        <Row gutter={24}>
          <Col span={6}>
            <label>一级菜单按钮</label>&nbsp;
            <Dropdown overlay={menu}>
              <Button type='primary'>
                菜单按钮 <Icon type="down" />
              </Button>
            </Dropdown>
          </Col>
          <Col span={6}>
            <label>次级菜单按钮</label>&nbsp;
            <Dropdown overlay={menu}>
              <Button type='secondary'>
                菜单按钮 <Icon type="down" />
              </Button>
            </Dropdown>
          </Col>
          <Col span={6}>
            <label style={{ overflow: 'hidden', textOverflow: 'hidden' }}>更次级菜单按钮</label>&nbsp;
            <Dropdown overlay={menu}>
              <Button>
                菜单按钮 <Icon type="down" />
              </Button>
            </Dropdown>
          </Col>
          <Col span={6}>
            <label>文字链按钮</label>
            <Button icon='plus-circle' type="link">创建消息</Button>
          </Col>
        </Row>
      </section>
    )
  }
}

ReactDOM.render(<Demo />, mountNode)

```