You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.4 KiB

category title cover demo group
Components Badge https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/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

API

Badge

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 [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 -
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 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 -