Button

To trigger an operation.

When To Use#

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

Import this Component Individually#

You can get more detail here.

import { NzButtonModule } from 'ng-zorro-antd/button';

Examples

There are primary button, default button, dashed button and danger button in antd.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-basic',
  template: `
    <button nz-button nzType="primary">Primary</button>
    <button nz-button nzType="default">Default</button>
    <button nz-button nzType="dashed">Dashed</button>
    <button nz-button nzType="danger">Danger</button>
    <button nz-button nzType="link">Link</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonBasicComponent {}




Ant Design supports a default button size as well as a large and small size.

If a large or small button is desired, set the nzSize property to either large or small respectively. Omit the nzSize property for a button with the default size.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <label nz-radio-button nzValue="large">Large</label>
      <label nz-radio-button nzValue="default">Default</label>
      <label nz-radio-button nzValue="small">Small</label>
    </nz-radio-group>
    <br />
    <br />
    <button nz-button [nzSize]="size" nzType="primary">Primary</button>
    <button nz-button [nzSize]="size" nzType="default">Default</button>
    <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
    <button nz-button [nzSize]="size" nzType="danger">Danger</button>
    <button nz-button [nzSize]="size" nzType="link">Link</button>
    <br />
    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon nzType="download"></i></button>
    <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
      <i nz-icon nzType="download"></i>Download
    </button>
    <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i>Download</button>
    <br />
    <nz-button-group [nzSize]="size">
      <button nz-button nzType="primary"><i nz-icon nzType="left"></i>Backward</button>
      <button nz-button nzType="primary">Forward<i nz-icon nzType="right"></i></button>
    </nz-button-group>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }

      nz-button-group [nz-button] {
        margin-right: 0;
      }
    `
  ]
})
export class NzDemoButtonSizeComponent {
  size = 'large';
}


A loading indicator can be added to a button by setting the nzLoading property on the nz-button.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-loading',
  template: `
    <button nz-button nzType="primary" nzLoading><i nz-icon nzType="poweroff"></i>Loading</button>
    <button nz-button nzType="primary" nzSize="small" nzLoading>Loading</button>
    <br />
    <button nz-button nzType="primary" (click)="loadOne()" [nzLoading]="isLoadingOne">Click me!</button>
    <button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo">
      <i nz-icon nzType="poweroff"></i>Click me!
    </button>
    <br />
    <button nz-button nzLoading nzShape="circle"></button>
    <button nz-button nzLoading nzType="primary" nzShape="circle"></button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonLoadingComponent {
  isLoadingOne = false;
  isLoadingTwo = false;

  loadOne(): void {
    this.isLoadingOne = true;
    setTimeout(() => {
      this.isLoadingOne = false;
    }, 5000);
  }

  loadTwo(): void {
    this.isLoadingTwo = true;
    setTimeout(() => {
      this.isLoadingTwo = false;
    }, 5000);
  }
}

Basic

With Icon

Buttons can be grouped by placing multiple nz-button components into a nz-button-group.

The nzSize can be set to large, small or left unset resulting in a default size.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-button-group',
  template: `
    <h4>Basic</h4>
    <nz-button-group>
      <button nz-button>Cancel</button>
      <button nz-button nzType="primary">OK</button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="default" disabled>L</button>
      <button nz-button nzType="default" disabled>M</button>
      <button nz-button nzType="default" disabled>R</button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="primary" disabled>L</button>
      <button nz-button nzType="default" disabled>M</button>
      <button nz-button nzType="default">M</button>
      <button nz-button nzType="dashed" disabled>R</button>
    </nz-button-group>
    <h4>With Icon</h4>
    <nz-button-group>
      <button nz-button nzType="primary"><i nz-icon nzType="left"></i> Go back</button>
      <button nz-button nzType="primary">Go forward<i nz-icon nzType="right"></i></button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="primary"><i nz-icon nzType="cloud"></i></button>
      <button nz-button nzType="primary"><i nz-icon nzType="cloud-download"></i></button>
    </nz-button-group>
  `,
  styles: [
    `
      h4 {
        margin: 16px 0;
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
      }

      h4:first-child {
        margin-top: 0;
      }

      [nz-button] {
        margin-bottom: 12px;
      }

      nz-button-group {
        margin-bottom: 8px;
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoButtonButtonGroupComponent {}

nzBlock property will make the button fit to its parent width.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-block',
  template: `
    <button nz-button nzType="primary" nzBlock>Primary</button>
    <button nz-button nzType="default" nzBlock>Default</button>
    <button nz-button nzType="dashed" nzBlock>Dashed</button>
    <button nz-button nzType="danger" nzBlock>Danger</button>
    <button nz-button nzType="link" nzBlock>Link</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonBlockComponent {}

nz-button components can contain an icon. Just placing an icon within the nz-button

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-icon',
  template: `
    <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
    <button nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
    <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
    <br />
    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
    <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
    <button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
    <button nz-button nzType="dashed"><i nz-icon nzType="search"></i>Search</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonIconComponent {}



To mark a button as disabled, add the disabled property to the Button.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-disabled',
  template: `
    <button nz-button nzType="primary">Primary</button>
    <button nz-button nzType="primary" disabled>Primary(disabled)</button>
    <br />
    <button nz-button nzType="default">Default</button>
    <button nz-button nzType="default" disabled>Default(disabled)</button>
    <br />
    <button nz-button nzType="dashed">Dashed</button>
    <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
    <br />
    <button nz-button nzType="link">Link</button>
    <button nz-button nzType="link" disabled>Link(disabled)</button>
    <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
      <button nz-button nzGhost>Ghost</button>
      <button nz-button nzGhost disabled>Ghost(disabled)</button>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonDisabledComponent {}

If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into nz-dropdown.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-multiple',
  template: `
    <button nz-button nzType="primary">primary</button>
    <button nz-button nzType="default">secondary</button>
    <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <a>1st item</a>
        </li>
        <li nz-menu-item>
          <a>2nd item</a>
        </li>
        <li nz-menu-item>
          <a>3rd item</a>
        </li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonMultipleComponent {}

nzGhost property will make button's background transparent, it is common used in colored background.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-button-ghost',
  template: `
    <div style="background: rgb(190, 200, 200);padding: 26px 16px 16px;">
      <button nz-button nzType="primary" nzGhost>Primary</button>
      <button nz-button nzType="default" nzGhost>Default</button>
      <button nz-button nzType="dashed" nzGhost>Dashed</button>
      <button nz-button nzType="danger" nzGhost>Danger</button>
      <button nz-button nzType="link" nzGhost>Link</button>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonGhostComponent {}

API#

[nz-button]#

To get a customized button, just set nzType/nzShape/nzSize/nzLoading/disabled.

PropertyDescriptionTypeDefaultGlobal Config
[nzGhost]make background transparent and invert text and border colorsbooleanfalse
[nzLoading]set the loading status of buttonbooleanfalse
[nzShape]can be set to circleround or omitted'circle'|'round'-
[nzSize]can be set to smalllarge or omitted'large'|'small'|'default''default'
[nzType]can be set to primarydasheddanger or omitted (meaning default)'primary'|'dashed'|'danger'|'default'|'link''default'
[nzBlock]option to fit button width to its parent widthbooleanfalse