Procredit

Components

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.

Basic

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

^{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}⁰

Standalone

Used in standalone when children is empty.

^{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
90
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}^{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}⁹⁹⁺

Overflow Count

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

^{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
90
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}⁹⁹⁺¹⁰⁺⁹⁹⁹⁺

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.

^{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
90
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}

Dynamic

The count will be animated as it changes.

^{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
90
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}

Show badge

Status

Standalone badge with status.

Success

Error

Default

Processing

Warning

API

Property	Description	Type	Default
color	Customize Badge dot color	string	-
count	Number to show in badge	ReactNode
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
status	Set Badge as a status dot	success \| processing \| default \| error \| warning
text	If status is set, text sets the display text of the status dot	string
title	Text to show when hovering over the badge	string	count