Button按钮

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

何时使用

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

在 Ant Design 中，我们有四种按钮。

  • 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
  • 默认按钮：用于没有主次之分的一组行动点。
  • 虚线按钮：常用于添加操作。
  • 文本按钮：用于最次级的行动点。
  • 链接按钮：用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

  • 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
  • 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
  • 禁用：行动点不可用的时候，一般需要文案解释。
  • 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
  1. import { NzButtonModule } from 'ng-zorro-antd/button';

代码演示

Button按钮 - 图1

按钮类型

按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-basic',
  5.   template: `
  6.     <button nz-button nzType="primary">Primary Button</button>
  7.     <button nz-button nzType="default">Default Button</button>
  8.     <button nz-button nzType="dashed">Dashed Button</button>
  9.     <button nz-button nzType="text">Text Button</button>
  10.     <a nz-button nzType="link">Link Button</a>
  11.   `,
  12.   styles: [
  13.     `
  14.       [nz-button] {
  15.         margin-right: 8px;
  16.         margin-bottom: 12px;
  17.       }
  18.     `
  19.   ]
  20. })
  21. export class NzDemoButtonBasicComponent {}

Button按钮 - 图2

按钮尺寸

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

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

  1. import { Component } from '@angular/core';
  2. import { NzButtonSize } from 'ng-zorro-antd/button';
  4. @Component({
  5.   selector: 'nz-demo-button-size',
  6.   template: `
  7.     <nz-radio-group [(ngModel)]="size">
  8.       <label nz-radio-button nzValue="large">Large</label>
  9.       <label nz-radio-button nzValue="default">Default</label>
  10.       <label nz-radio-button nzValue="small">Small</label>
  11.     </nz-radio-group>
  12.     <br />
  13.     <br />
  14.     <button nz-button [nzSize]="size" nzType="primary">Primary</button>
  15.     <button nz-button [nzSize]="size" nzType="default">Default</button>
  16.     <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
  17.     <a nz-button [nzSize]="size" nzType="link">Link</a>
  18.     <br />
  19.     <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i></button>
  20.     <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon nzType="download"></i></button>
  21.     <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon nzType="download"></i></button>
  22.     <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon nzType="download"></i>Download</button>
  23.     <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i>Download</button>
  24.     <br />
  25.     <nz-button-group [nzSize]="size">
  26.       <button nz-button nzType="primary"><i nz-icon nzType="left"></i>Backward</button>
  27.       <button nz-button nzType="primary">Forward<i nz-icon nzType="right"></i></button>
  28.     </nz-button-group>
  29.   `,
  30.   styles: [
  31.     `
  32.       [nz-button] {
  33.         margin-right: 8px;
  34.         margin-bottom: 12px;
  35.       }
  37.       nz-button-group [nz-button] {
  38.         margin-right: 0;
  39.       }
  40.     `
  41.   ]
  42. })
  43. export class NzDemoButtonSizeComponent {
  44.   size: NzButtonSize = 'large';
  45. }

Button按钮 - 图3

加载中状态

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-loading',
  5.   template: `
  6.     <button nz-button nzType="primary" nzLoading><i nz-icon nzType="poweroff"></i>Loading</button>
  7.     <button nz-button nzType="primary" nzSize="small" nzLoading>Loading</button>
  8.     <br />
  9.     <button nz-button nzType="primary" (click)="loadOne()" [nzLoading]="isLoadingOne">Click me!</button>
  10.     <button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo"><i nz-icon nzType="poweroff"></i>Click me!</button>
  11.     <br />
  12.     <button nz-button nzLoading nzShape="circle"></button>
  13.     <button nz-button nzLoading nzType="primary" nzShape="circle"></button>
  14.   `,
  15.   styles: [
  16.     `
  17.       [nz-button] {
  18.         margin-right: 8px;
  19.         margin-bottom: 12px;
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoButtonLoadingComponent {
  25.   isLoadingOne = false;
  26.   isLoadingTwo = false;
  28.   loadOne(): void {
  29.     this.isLoadingOne = true;
  30.     setTimeout(() => {
  31.       this.isLoadingOne = false;
  32.     }, 5000);
  33.   }
  35.   loadTwo(): void {
  36.     this.isLoadingTwo = true;
  37.     setTimeout(() => {
  38.       this.isLoadingTwo = false;
  39.     }, 5000);
  40.   }
  41. }

Button按钮 - 图4

按钮组合

可以将多个 nz-button 放入 nz-button-group 的容器中。

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-button-group',
  5.   template: `
  6.     <h4>Basic</h4>
  7.     <nz-button-group>
  8.       <button nz-button>Cancel</button>
  9.       <button nz-button nzType="primary">OK</button>
  10.     </nz-button-group>
  11.     <nz-button-group>
  12.       <button nz-button nzType="default" disabled>L</button>
  13.       <button nz-button nzType="default" disabled>M</button>
  14.       <button nz-button nzType="default" disabled>R</button>
  15.     </nz-button-group>
  16.     <nz-button-group>
  17.       <button nz-button nzType="primary" disabled>L</button>
  18.       <button nz-button nzType="default" disabled>M</button>
  19.       <button nz-button nzType="default">M</button>
  20.       <button nz-button nzType="dashed" disabled>R</button>
  21.     </nz-button-group>
  22.     <h4>With Icon</h4>
  23.     <nz-button-group>
  24.       <button nz-button nzType="primary"><i nz-icon nzType="left"></i> Go back</button>
  25.       <button nz-button nzType="primary">Go forward<i nz-icon nzType="right"></i></button>
  26.     </nz-button-group>
  27.     <nz-button-group>
  28.       <button nz-button nzType="primary"><i nz-icon nzType="cloud"></i></button>
  29.       <button nz-button nzType="primary"><i nz-icon nzType="cloud-download"></i></button>
  30.     </nz-button-group>
  31.   `,
  32.   styles: [
  33.     `
  34.       h4 {
  35.         margin: 16px 0;
  36.         font-size: 14px;
  37.         line-height: 1;
  38.         font-weight: normal;
  39.       }
  41.       h4:first-child {
  42.         margin-top: 0;
  43.       }
  45.       [nz-button] {
  46.         margin-bottom: 12px;
  47.       }
  49.       nz-button-group {
  50.         margin-bottom: 8px;
  51.         margin-right: 8px;
  52.       }
  53.     `
  54.   ]
  55. })
  56. export class NzDemoButtonButtonGroupComponent {}

Button按钮 - 图5

Block 按钮

nzBlock 属性将使按钮适合其父宽度。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-block',
  5.   template: `
  6.     <button nz-button nzType="primary" nzBlock>Primary</button>
  7.     <button nz-button nzType="default" nzBlock>Default</button>
  8.     <button nz-button nzType="dashed" nzBlock>Dashed</button>
  9.     <button nz-button nzType="text" nzBlock>Text</button>
  10.     <a nz-button nzType="link" nzBlock>Link</a>
  11.   `,
  12.   styles: [
  13.     `
  14.       [nz-button] {
  15.         margin-bottom: 12px;
  16.       }
  17.     `
  18.   ]
  19. })
  20. export class NzDemoButtonBlockComponent {}

Button按钮 - 图6

图标按钮

当需要在 nz-button 内嵌入图标时，可以直接在 nz-button 内嵌入对应的 icon。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-icon',
  5.   template: `
  6.     <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
  7.     <button nz-button nzType="primary" nzShape="circle">A</button>
  8.     <button nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
  9.     <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
  10.     <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
  11.     <br />
  12.     <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
  13.     <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
  14.     <button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
  15.     <button nz-button nzType="dashed"><i nz-icon nzType="search"></i>Search</button>
  16.   `,
  17.   styles: [
  18.     `
  19.       [nz-button] {
  20.         margin-right: 8px;
  21.         margin-bottom: 12px;
  22.       }
  23.     `
  24.   ]
  25. })
  26. export class NzDemoButtonIconComponent {}

Button按钮 - 图7

不可用状态

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-disabled',
  5.   template: `
  6.     <button nz-button nzType="primary">Primary</button>
  7.     <button nz-button nzType="primary" disabled>Primary(disabled)</button>
  8.     <br />
  9.     <button nz-button nzType="default">Default</button>
  10.     <button nz-button nzType="default" disabled>Default(disabled)</button>
  11.     <br />
  12.     <button nz-button nzType="dashed">Dashed</button>
  13.     <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
  14.     <br />
  15.     <a nz-button nzType="text">Text</a>
  16.     <a nz-button nzType="text" disabled>Text(disabled)</a>
  17.     <br />
  18.     <a nz-button nzType="link">Link</a>
  19.     <a nz-button nzType="link" disabled>Link(disabled)</a>
  20.     <br />
  21.     <a nz-button nzType="text" nzDanger>Danger Text</a>
  22.     <a nz-button nzType="text" disabled nzDanger>Danger Text(disabled)</a>
  23.     <br />
  24.     <a nz-button nzType="link" nzDanger>Danger Link</a>
  25.     <a nz-button nzType="link" disabled nzDanger>Danger Link(disabled)</a>
  26.     <br />
  27.     <button nz-button nzType="default" nzDanger>Danger Default</button>
  28.     <button nz-button nzType="default" disabled nzDanger>Danger Default(disabled)</button>
  29.     <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
  30.       <button nz-button nzGhost>Ghost</button>
  31.       <button nz-button nzGhost disabled>Ghost(disabled)</button>
  32.     </div>
  33.   `,
  34.   styles: [
  35.     `
  36.       [nz-button] {
  37.         margin-right: 8px;
  38.         margin-bottom: 12px;
  39.       }
  40.     `
  41.   ]
  42. })
  43. export class NzDemoButtonDisabledComponent {}

Button按钮 - 图8

多个按钮组合

按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 nz-dropdown 中组合使用。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-multiple',
  5.   template: `
  6.     <button nz-button nzType="primary">primary</button>
  7.     <button nz-button nzType="default">secondary</button>
  8.     <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
  9.     <nz-dropdown-menu #menu="nzDropdownMenu">
  10.       <ul nz-menu>
  11.         <li nz-menu-item>
  12.           <a>1st item</a>
  13.         </li>
  14.         <li nz-menu-item>
  15.           <a>2nd item</a>
  16.         </li>
  17.         <li nz-menu-item>
  18.           <a>3rd item</a>
  19.         </li>
  20.       </ul>
  21.     </nz-dropdown-menu>
  22.   `,
  23.   styles: [
  24.     `
  25.       [nz-button] {
  26.         margin-right: 8px;
  27.         margin-bottom: 12px;
  28.       }
  29.     `
  30.   ]
  31. })
  32. export class NzDemoButtonMultipleComponent {}

Button按钮 - 图9

幽灵按钮

添加 nzGhost 属性后，幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-ghost',
  5.   template: `
  6.     <div style="background: rgb(190, 200, 200);padding: 26px 16px 16px;">
  7.       <button nz-button nzType="primary" nzGhost>Primary</button>
  8.       <button nz-button nzType="default" nzGhost>Default</button>
  9.       <button nz-button nzType="dashed" nzGhost>Dashed</button>
  10.       <a nz-button nzType="link" nzGhost>Link</a>
  11.     </div>
  12.   `,
  13.   styles: [
  14.     `
  15.       [nz-button] {
  16.         margin-right: 8px;
  17.         margin-bottom: 12px;
  18.       }
  19.     `
  20.   ]
  21. })
  22. export class NzDemoButtonGhostComponent {}

Button按钮 - 图10

危险按钮

使用 nzDanger 将按钮标识为危险状态。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-button-danger',
  5.   template: `
  6.     <button nz-button nzType="primary" nzDanger>Primary</button>
  7.     <button nz-button nzType="default" nzDanger>Default</button>
  8.     <button nz-button nzType="dashed" nzDanger>Dashed</button>
  9.     <button nz-button nzType="text" nzDanger>Text</button>
  10.     <a nz-button nzType="link" nzDanger>Link</a>
  11.   `,
  12.   styles: [
  13.     `
  14.       [nz-button] {
  15.         margin-right: 8px;
  16.         margin-bottom: 12px;
  17.       }
  18.     `
  19.   ]
  20. })
  21. export class NzDemoButtonDangerComponent {}

API

[nz-button]directive

注意：nz-button 是一个 Directive，除以下表格之外还支持例如 disabled 等原生 button 的所有属性。

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：nzType -> nzShape -> nzSize -> nzLoading -> disabled

按钮的属性说明如下：

属性说明类型默认值支持全局配置
[disabled]禁止与button交互booleanfalse
[nzGhost]幽灵属性，使按钮背景透明booleanfalse
[nzLoading]设置按钮载入状态booleanfalse
[nzShape]设置按钮形状，可选值为 circleround 或者不设‘circle’|’round’-
[nzSize]设置按钮大小，可选值为 smalllarge 或者不设‘large’|’small’|’default’‘default’✅
[nzType]设置按钮类型，可选值为 primarydashedtextlink 或者不设‘primary’|’dashed’|’link’|’text’-
[nzBlock]将按钮宽度调整为其父宽度的选项booleanfalse
[nzDanger]设置危险按钮booleanfalse

nz-button-groupcomponent

属性说明类型默认值支持全局配置
[nzSize]设置按钮大小，可选值为 smalllarge 或者不设‘large’|’small’|’default’‘default’-