Badge

import { Badge } from 'antd';
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
<Badge count={22}>
<a href="#" className="head-example" />
</Badge>

API

<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={5} />

Property

Description

Type

Default

Version

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, like[x, y]

[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