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 { 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

Basic

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

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

99+ 10+ 999+
Overflow Count

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

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9

Offset

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

Size

Set size of numeral Badge.

expand codeexpand code
      Loading...
Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies

Pushes open the window
And raises the spyglass.
Hippies
Ribbon

Use ribbon badge.

expand codeexpand code
      Loading...

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+
Standalone

Add nzStandalone when there are no children.

expand codeexpand code
      Loading...
Link something
Red badge

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

expand codeexpand code
      Loading...

0

1

2

3

4

5

6

7

8

9


Dynamic

The count will be animated as it changes.

expand codeexpand code
      Loading...

Success
Error
Default
Processing
Warning
Status

Standalone badge with status.

expand codeexpand code
      Loading...

Presets:

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

Custom:

#f50
#2db7f5
#87d068
#108ee9
Colorful Badge

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
      Loading...

API#

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

nz-badge#

PropertyDescriptionTypeDefaultGlobal Config
[nzStandalone]Whether standalone modeboolean--
[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
[nzSize]If nzCount is set, size sets the size of badgedefault | smalldefault
[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 | TemplateRef<void>-
[nzTitle]Text to show when hovering over the badge（Only Non-standalone), hide when value is nullstring | nullnzCount
[nzOffset]set offset of the badge dot, like[x, y] (Only Non-standalone)[number, number]-

nz-ribbon#

PropertyDescriptionTypeDefault
nzColorCustomize Ribbon colorstring-
nzPlacementThe placement of the Ribbonstartend
nzTextContent inside the Ribbonstring | TemplateRef<void>-