Button 按钮

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

何时使用#

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

API#

  • 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled

  • 按钮的属性说明如下：

属性 说明 类型 默认值
type 设置按钮类型，可选值为 primary ghost 或者不设 string -
htmlType 设置 button 原生的 type 值，可选值请参考 HTML标准 string button
shape 设置按钮形状，可选值为 circle circle-outline 或者不设 string 无
size 设置按钮大小，可选值为 small large 或者不设 string default
loading 设置按钮载入状态 boolean false
onClick click 事件的 handler function function() {}
  • <Button>Hello world!</Button> 最终会被渲染为 <button>Hello world!</button>，并且除了上表中的属性，其它属性都会直接传到 <button></button>

IE8 border radius support#

Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。 如果强烈需要圆角按钮，我们提供了 css3pie 的兼容方案。

使用时只需在 html 头部加入以下代码即可。

<!--[if IE 8]>
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
<![endif]-->

代码演示 

import { Button } from 'antd';

ReactDOM.render(<div>
  <Button type="primary">主按钮</Button>
  <Button>次按钮</Button>
  <Button type="ghost">幽灵按钮</Button>
  <Button type="dashed">虚线按钮</Button>
</div>,
mountNode);
按钮类型

按钮有三种类型：主按钮、次按钮、幽灵按钮。

通过设置 type 为 primary ghost 可分别创建主按钮、幽灵按钮，若不设置 type 值则为次按钮。不同的样式可以用来区别其重要程度。

主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。

import { Button } from 'antd';

ReactDOM.render(<div>
  <Button type="primary" size="large">大号按钮</Button>
  <Button type="primary">中号按钮(默认)</Button>
  <Button type="primary" size="small">小号按钮</Button>
</div>
, mountNode);
按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

import { Button, Icon } from 'antd';

const App = React.createClass({
  getInitialState() {
    return {
      loading: false,
      iconLoading: false,
    };
  },
  enterLoading() {
    this.setState({ loading: true });
  },
  enterIconLoading() {
    this.setState({ iconLoading: true });
  },
  render() {
    return <div>
      <Button type="primary" size="large" loading>
        加载中
      </Button>
      <Button type="primary" loading>
        加载中
      </Button>
      <Button type="primary" size="small" loading>
        加载中
      </Button>
      <br />
      <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
        点击变加载
      </Button>
      <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
        <Icon type="poweroff" />点击变加载
      </Button>
    </div>;
  }
});

ReactDOM.render(<App />, mountNode);
加载中

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

import { Button, Icon } from 'antd';

ReactDOM.render(<div>
  <Button type="primary" shape="circle" size="large">
    <Icon type="search" />
  </Button>
  <Button type="primary" size="large">
    <Icon type="search" />
  大按钮
  </Button>

  <Button type="primary" shape="circle">
    <Icon type="search" />
  </Button>
  <Button type="primary">
    <Icon type="search" />
  中按钮
  </Button>

  <Button type="primary" shape="circle" size="small">
    <Icon type="search" />
  </Button>
  <Button type="primary" size="small">
    <Icon type="search" />
  小按钮
  </Button>

  <br />

  <Button type="ghost" shape="circle-outline" size="large">
    <Icon type="search" />
  </Button>
  <Button type="ghost" shape="circle-outline">
    <Icon type="search" />
  </Button>
  <Button type="ghost" shape="circle-outline" size="small">
    <Icon type="search" />
  </Button>
</div>,
mountNode);
图标按钮

Button 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。

import { Button, Icon } from 'antd';

ReactDOM.render(<div>
  <Button type="primary" shape="circle" size="large">
    <Icon type="search" />
  </Button>
  <Button type="primary" shape="circle">
    <Icon type="search" />
  </Button>
  <Button type="primary" shape="circle" size="small">
    <Icon type="search" />
  </Button>
  <br />
  <Button type="ghost" shape="circle-outline" size="large">
    <Icon type="search" />
  </Button>
  <Button type="ghost" shape="circle-outline">
    <Icon type="search" />
  </Button>
  <Button type="ghost" shape="circle-outline" size="small">
    <Icon type="search" />
  </Button>
</div>
, mountNode);
按钮形状

通过设置 shape 为 circle circle-outline，可以把按钮形状设为圆形，并且 circle-outline 在 hover 时会有动画效果。

import { Button } from 'antd';

ReactDOM.render(<div>
  <Button type="primary">主按钮</Button>
  <Button type="primary" disabled>主按钮(失效)</Button>
  <br />
  <Button>次按钮</Button>
  <Button disabled>次按钮(失效)</Button>
  <br />
  <Button type="ghost">幽灵按钮</Button>
  <Button type="ghost" disabled>幽灵按钮(失效)</Button>
  <br />
  <Button type="dashed">虚线按钮</Button>
  <Button type="dashed" disabled>虚线按钮(失效)</Button>
</div>
, mountNode);
不可用

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

import { Button, Icon } from 'antd';
const ButtonGroup = Button.Group;

ReactDOM.render(<div>
<h4>基本组合</h4>
<ButtonGroup>
  <Button type="primary">确定</Button>
  <Button type="primary">取消</Button>
</ButtonGroup>
<ButtonGroup>
  <Button>左</Button>
  <Button>中</Button>
  <Button>右</Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="primary">左</Button>
  <Button type="ghost">中</Button>
  <Button type="ghost">中</Button>
  <Button>右</Button>
</ButtonGroup>

<h4>带图标按钮组合</h4>
<ButtonGroup>
  <Button type="primary">
    <Icon type="left" />
    <span>后退</span>
  </Button>
  <Button type="primary">
    前进
    <Icon type="right" />
  </Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="primary">
    <Icon type="cloud" />
  </Button>
  <Button type="primary">
    <Icon type="cloud-download" />
  </Button>
</ButtonGroup>

<h4>多个组合</h4>
<ButtonGroup>
  <Button type="ghost">1</Button>
  <Button type="ghost">2</Button>
  <Button type="ghost">3</Button>
  <Button type="ghost">4</Button>
  <Button type="ghost">
    <span>前进</span>
    <Icon type="right" />
  </Button>
</ButtonGroup>

<h4>尺寸</h4>
<ButtonGroup size="large">
  <Button type="ghost">大</Button>
  <Button type="ghost">大</Button>
  <Button type="ghost">大</Button>
</ButtonGroup>
<ButtonGroup>
  <Button type="ghost">默认</Button>
  <Button type="ghost">默认</Button>
  <Button type="ghost">默认</Button>
</ButtonGroup>
<ButtonGroup size="small">
  <Button type="ghost">小</Button>
  <Button type="ghost">小</Button>
  <Button type="ghost">小</Button>
</ButtonGroup>
</div>
, mountNode);
按钮组合

可以将多个 Button 放入 Button.Group 的容器中。

通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size，则尺寸为中。