ant-design/components/badge/index.en-US.md

category	title	cover	coverDark	demo	group
Components	Badge	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original	cols 2	Data Display

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 Standalone Overflow Count Red badge Dynamic Clickable Offset Size Status Colorful Badge Ribbon Ribbon Debug Mixed usage Title Colorful Badge support count Debug Component 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	-	-
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

Property	Description	Type	Default	Version
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