Button 按钮

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

何时使用

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

如何使用

按钮的基础样式为 ant-btn。

通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：

.ant-btn
  ↓
.ant-btn-primary | .ant-btn-ghost
  ↓
.ant-btn-circle | .ant-btn-circle-outline
  ↓
.ant-btn-lg | .ant-btn-sm

按钮的样式参数说明如下：

类名	说明
`.ant-btn`	按钮基础样式。
`.ant-btn-primary` `.ant-btn-ghost`	使用这些列出的类可以快速创建一个带有预定义样式的按钮。
`.ant-btn-circle` `.ant-btn-circle-outline`	用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。
`.ant-btn-lg` `.ant-btn-sm`	定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。
`.ant-btn-group`	按钮组合，通过按钮组容器把一组按钮放在同一行里。

当按钮只有两个汉字时，需要在两字中加空格。

组件演示

Link

<button class="ant-btn">Button</button>
<a href="javascript:;" class="ant-btn" role="button">Link</a>
<input class="ant-btn" type="button" value="Input" />
<input class="ant-btn" type="submit" value="Submit" />

<br>

<!-- Styled Button -->
<button class="ant-btn ant-btn-primary">主按钮</button>
<button class="ant-btn">次按钮</button>
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>

标准按钮

为 <button> <a> 或 <input> 元素添加 .ant-btn 类即可使用 ant-design 提供的样式。

另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。

.ant-btn-primary .ant-btn-ghost

其中 .ant-btn 类定义了按钮的默认样式，语义上代表次按钮。

注: 当按钮文字为两个字时，中间需要间隔一个字符。

<button class="ant-btn ant-btn-primary">主按钮</button>
<button class="ant-btn ant-btn-primary disabled">主按钮(失效)</button>
<p></p>
<button class="ant-btn">次按钮</button>
<button class="ant-btn disabled">次按钮(失效)</button>
<p></p>
<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
<button class="ant-btn ant-btn-ghost disabled">幽灵按钮(失效)</button>

按钮状态

通过背景色透明度的变化来体现不同的操作状态，移入或点击元素可以查看状态。

失效状态：为 <button> 元素添加 disabled 属性，即可体现。

<button class="ant-btn ant-btn-primary ant-btn-menu">
  <span>菜单按钮</span>
  <span class="anticon anticon-down"></span>
</button>
<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
  <span class="anticon anticon-down"></span>
</button>

菜单按钮

注: 下拉按钮的 icon 大小统一成 10px。

更多交互，详见 Dropdown 下拉菜单。

var App = React.createClass({
  getInitialState() {
    return {
      loading: false
    };
  },
  enterLoading() {
    this.setState({
      loading: true
    });
  },
  render() {
    var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
    return <div>
      <button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
        加载中
      </button>
      <button className="ant-btn ant-btn-primary ant-btn-loading">
        加载中
      </button>
      <button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
        加载中
      </button>
      <br />
      <button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
        点击变加载
      </button>
    </div>;
  }
});

React.render(<App />, document.getElementById('components-button-demo-loading'));

加载中

加载按钮。最后一个按钮演示点击后进入加载状态。

<button class="ant-btn ant-btn-primary ant-btn-lg">大号按钮</button>
<button class="ant-btn ant-btn-primary">中号按钮(默认)</button>
<button class="ant-btn ant-btn-primary ant-btn-sm">小号按钮</button>

按钮尺寸

提供大中小三种尺寸。

使用 .ant-btn-lg .ant-btn-sm 即可获得大小尺寸，默认尺寸为中。

<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
  <i class="anticon anticon-search"></i>
</button>
<button class="ant-btn ant-btn-primary ant-btn-lg">
  <i class="anticon anticon-search"></i>
  大按钮
</button>

<button class="ant-btn ant-btn-primary ant-btn-circle">
  <i class="anticon anticon-search"></i>
</button>
<button class="ant-btn ant-btn-primary">
  <i class="anticon anticon-search"></i>
  中按钮
</button>

<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
  <i class="anticon anticon-search"></i>
</button>
<button class="ant-btn ant-btn-primary ant-btn-sm">
  <i class="anticon anticon-search"></i>
  小按钮
</button>

<p></p>

<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
  <i class="anticon anticon-search"></i>
</button>
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
  <i class="anticon anticon-search"></i>
</button>
<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
  <i class="anticon anticon-search"></i>
</button>

图标按钮

图标一般放在文字前面，也可以单独存在。

基本组合

带图标按钮组合

多个组合

尺寸

<h4>基本组合</h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">确 定</button>
  <button class="ant-btn ant-btn-primary">取 消</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn">左</button>
  <button class="ant-btn">中</button>
  <button class="ant-btn">右</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">左</button>
  <button class="ant-btn ant-btn-ghost">中</button>
  <button class="ant-btn ant-btn-ghost">中</button>
  <button class="ant-btn">右</button>
</div>
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-left"></span>
  <span>后 退</span>
  </button>
  <button class="ant-btn ant-btn-primary">
  <span>前 进</span>
  <span class="anticon anticon-right"></span>
  </button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-cloud"></span>
  </button>
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-cloud-download"></span>
  </button>
</div>
<h4>多个组合</h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-ghost">1</button>
  <button class="ant-btn ant-btn-ghost">2</button>
  <button class="ant-btn ant-btn-ghost">3</button>
  <button class="ant-btn ant-btn-ghost">4</button>
  <button class="ant-btn ant-btn-ghost">
  <span>前 进</span>
  <span class="anticon anticon-right"></span>
  </button>
</div>
<h4>尺寸</h4>
<div class="ant-btn-group ant-btn-group-lg">
  <button class="ant-btn ant-btn-ghost">大</button>
  <button class="ant-btn ant-btn-ghost">大</button>
  <button class="ant-btn ant-btn-ghost">大</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-ghost">默 认</button>
  <button class="ant-btn ant-btn-ghost">默 认</button>
  <button class="ant-btn ant-btn-ghost">默 认</button>
</div>
<div class="ant-btn-group ant-btn-group-sm">
  <button class="ant-btn ant-btn-ghost">小</button>
  <button class="ant-btn ant-btn-ghost">小</button>
  <button class="ant-btn ant-btn-ghost">小</button>
</div>

按钮组合

将一系列的 .ant-btn 放入 .ant-btn-group 的容器中。

按钮组合尺寸

只要给 .ant-btn-group 加上 .ant-btn-group-* 类，即可设置不同的尺寸，目前支持大中小三种尺寸。