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.

Examples

Basic

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

Overflow Count

${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.

Dynamic

The count will be animated as it changes.

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.

Status

Standalone badge with status.

Ribbon

Use ribbon badge.

Standalone

Used in standalone when children is empty.

Red badge

This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

Clickable

The badge can be wrapped with a tag to make it linkable.

Size

Set size of numeral Badge.

Colorful Badge

We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.

API

Common props ref：Common props

Badge

Property	Description	Type	Default	Version
color	Customize Badge dot color	string	-
count	Number to show in badge	ReactNode	-
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.7.0
dot	Whether to display a red dot instead of `count`	boolean	false
offset	Set offset of the badge dot	[number, number]	-
overflowCount	Max count to show	number	99
showZero	Whether to show badge when `count` is zero	boolean	false
size	If `count` is set, `size` sets the size of badge	`default` \| `small`	-	4.6.0
status	Set Badge as a status dot	`success` \| `processing` \| `default` \| `error` \| `warning`	-
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.7.0
text	If `status` is set, `text` sets the display text of the status `dot`	ReactNode	-
title	Text to show when hovering over the badge	string	-

Badge.Ribbon (4.5.0+)

Property	Description	Type	Default
color	Customize Ribbon color	string	-
placement	The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR)	`start` \| `end`	`end`
text	Content inside the Ribbon	ReactNode	-

`styles` and `classNames` attribute

Property	Description	Version
root	set `root` element	5.7.0
indicator	set `badge` element	5.7.0

Design Token

Global Token

API

Common props ref：Common props

Badge

Property	Description	Type	Default	Version
color	Customize Badge dot color	string	-
count	Number to show in badge	ReactNode	-
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.7.0
dot	Whether to display a red dot instead of `count`	boolean	false
offset	Set offset of the badge dot	[number, number]	-
overflowCount	Max count to show	number	99
showZero	Whether to show badge when `count` is zero	boolean	false
size	If `count` is set, `size` sets the size of badge	`default` \| `small`	-	4.6.0
status	Set Badge as a status dot	`success` \| `processing` \| `default` \| `error` \| `warning`	-
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.7.0
text	If `status` is set, `text` sets the display text of the status `dot`	ReactNode	-
title	Text to show when hovering over the badge	string	-

Badge.Ribbon (4.5.0+)

Property	Description	Type	Default
color	Customize Ribbon color	string	-
placement	The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR)	`start` \| `end`	`end`
text	Content inside the Ribbon	ReactNode	-

styles and classNames attribute

Property	Description	Version
root	set `root` element	5.7.0
indicator	set `badge` element	5.7.0

Namu Design

Badge

Namu Design

Badge

When To Use

Examples

API

Badge

Badge.Ribbon (4.5.0+)

`styles` and `classNames` attribute

Design Token

Global Token

When To Use

Examples

API

Badge

Badge.Ribbon (4.5.0+)

`styles` and `classNames` attribute

Design Token

Global Token

BadgeChangelog

BadgeChangelog

When To Use

Examples

API

Badge

Badge.Ribbon (4.5.0+)

styles and classNames attribute

Design Token

Global Token

When To Use

Examples

API

Badge

Badge.Ribbon (4.5.0+)

styles and classNames attribute

Design Token

Global Token

Badge

Badge

`styles` and `classNames` attribute

`styles` and `classNames` attribute