Badge

Small numerical value or status descriptor for UI elements.
Import
Source components/badge
Docs Edit this page

When To Use#

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

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.

      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.

      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.

      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.

      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.

      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.

      Loading...
Red badge

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

      Loading...

0

1

2

3

4

5

6

7

8

9

Dynamic

The count will be animated as it changes.

      Loading...

Success
Error
Default
Processing
Warning
Status

Standalone badge with status.

      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.

      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 badge'default' | 'small''default'
[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#

| Property | Description | Type | Default | | --------------- | --------------------------- | ----------------------------- | ------- | --- | | [nzColor] | Customize Ribbon color | string | - | | [nzPlacement] | The placement of the Ribbon | 'start' \| 'end' | 'end' | | [nzText] | Content inside the Ribbon | string \| TemplateRef<void> | - | |