Badge

Small numerical value or status descriptor for UI elements.

When To Use#

Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

Import this Component Individually#

You can get more detail here.

import { NzBadgeModule } from 'ng-zorro-antd/badge';

Examples

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

Simplest Usage. Badge will be hidden when nzCount is 0, but we can use nzShowZero to show it.

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

@Component({
  selector: 'nz-demo-badge-basic',
  template: `
    <nz-badge [nzCount]="5">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="0" nzShowZero>
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="iconTemplate">
      <a class="head-example"></a>
    </nz-badge>
    <ng-template #iconTemplate>
      <i nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
    </ng-template>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeBasicComponent {}

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

99+10+999+

nzOverflowCount+ is displayed when count is larger than nzOverflowCount. The default value of nzOverflowCount is 99.

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

@Component({
  selector: 'nz-demo-badge-overflow',
  template: `
    <nz-badge [nzCount]="99">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="200">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="200" [nzOverflowCount]="10">
      <a class="head-example"></a>
    </nz-badge>
    <nz-badge [nzCount]="10000" [nzOverflowCount]="999">
      <a class="head-example"></a>
    </nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeOverflowComponent {}

Success
Error
Default
Processing
Warning

Standalone badge with status.

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

@Component({
  selector: 'nz-demo-badge-status',
  template: `
    <nz-badge nzStatus="success"></nz-badge>
    <nz-badge nzStatus="error"></nz-badge>
    <nz-badge nzStatus="default"></nz-badge>
    <nz-badge nzStatus="processing"></nz-badge>
    <nz-badge nzStatus="warning"></nz-badge>
    <br />
    <nz-badge nzStatus="success" nzText="Success"></nz-badge>
    <br />
    <nz-badge nzStatus="error" nzText="Error"></nz-badge>
    <br />
    <nz-badge nzStatus="default" nzText="Default"></nz-badge>
    <br />
    <nz-badge nzStatus="processing" nzText="Processing"></nz-badge>
    <br />
    <nz-badge nzStatus="warning" nzText="Warning"></nz-badge>
    <br />
  `
})
export class NzDemoBadgeStatusComponent {}

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

99+

Used in standalone when children is empty.

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

@Component({
  selector: 'nz-demo-badge-no-wrapper',
  template: `
    <nz-badge [nzCount]="25"></nz-badge>
    <nz-badge
      [nzCount]="4"
      [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
    ></nz-badge>
    <nz-badge [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }
    `
  ]
})
export class NzDemoBadgeNoWrapperComponent {}

This will simply display a red badge, without a specific count.

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

@Component({
  selector: 'nz-demo-badge-dot',
  template: `
    <nz-badge nzDot><i nz-icon nzType="notification"></i></nz-badge>
    <nz-badge nzDot [nzShowDot]="false"><i nz-icon nzType="notification"></i></nz-badge>
    <nz-badge nzDot>
      <a>Link something</a>
    </nz-badge>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      [nz-icon] {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
      }
    `
  ]
})
export class NzDemoBadgeDotComponent {}

0

1

2

3

4

5

6

7

8

9

The count will be animated as it changes.

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

@Component({
  selector: 'nz-demo-badge-change',
  template: `
    <div>
      <nz-badge [nzCount]="count">
        <a class="head-example"></a>
      </nz-badge>
      <nz-button-group>
        <button nz-button (click)="minCount()"><i nz-icon nzType="minus"></i></button>
        <button nz-button (click)="addCount()"><i nz-icon nzType="plus"></i></button>
      </nz-button-group>
    </div>

    <div style="margin-top: 10px;">
      <nz-badge [nzDot]="dot">
        <a class="head-example"></a>
      </nz-badge>
      <nz-switch [(ngModel)]="dot"></nz-switch>
    </div>
  `,
  styles: [
    `
      nz-badge {
        margin-right: 20px;
      }

      .head-example {
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: #eee;
        display: inline-block;
        vertical-align: middle;
      }
    `
  ]
})
export class NzDemoBadgeChangeComponent {
  count = 5;
  dot = true;

  addCount(): void {
    this.count++;
  }

  minCount(): void {
    this.count--;
    if (this.count < 0) {
      this.count = 0;
    }
  }
}

Presets:

pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime

Custom:

#f50
#2db7f5
#87d068
#108ee9

We preset a series of colorful Badge style for different situation usage. And you can always set it to a hex color string for custom color.

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

@Component({
  selector: 'nz-demo-badge-colorful',
  template: `
    <div>
      <h4 style="margin-bottom: 16px">Presets:</h4>
      <div *ngFor="let color of colors">
        <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
      </div>
      <h4 style="margin:16px 0">Custom:</h4>
      <nz-badge nzColor="#f50" nzText="#f50"></nz-badge>
      <br />
      <nz-badge nzColor="#2db7f5" nzText="#2db7f5"></nz-badge>
      <br />
      <nz-badge nzColor="#87d068" nzText="#87d068"></nz-badge>
      <br />
      <nz-badge nzColor="#108ee9" nzText="#108ee9"></nz-badge>
    </div>
  `
})
export class NzDemoBadgeColorfulComponent {
  colors = [
    'pink',
    'red',
    'yellow',
    'orange',
    'cyan',
    'green',
    'blue',
    'purple',
    'geekblue',
    'magenta',
    'volcano',
    'gold',
    'lime'
  ];
}

API#

<nz-badge [nzCount]="5">
  <a class="head-example"></a>
</nz-badge>
<nz-badge [nzCount]="5"></nz-badge>

nz-badge#

PropertyDescriptionTypeDefaultGlobal Config
[nzColor]Customize Badge dot colorstring-
[nzCount]Number to show in badgenumber | TemplateRef<void>-
[nzDot]Whether to display a red dot instead of countbooleanfalse
[nzShowDot]Whether to display the red dotbooleantrue
[nzOverflowCount]Max count to shownumber99
[nzShowZero]Whether to show badge when count is zerobooleanfalse
[nzStatus]Set nz-badge as a status dot'success' | 'processing' | 'default' | 'error' | 'warning'-
[nzText]If nzStatus is set, text sets the display text of the status dotstring-
[nzTitle]Text to show when hovering over the badge(Only Non-standalone)stringnzCount
[nzOffset]set offset of the badge dot, like[x, y] (Only Non-standalone)[number, number]-