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-* 类,即可设置不同的尺寸,目前支持大中小三种尺寸。