RUI.next

Data-Display
Badge

Badge

Badge is the section at corner for notification.

<Badge text="NEW" hot />
<Badge text="NEW" hot />

Example

Basic usage of Badge component.

Dot badge
Numberic badge
66+
Corner badge
HOT
Marketing badge
HOT
Customize badge
NEWPromotion

API

PropertiesDescriptionTypeDefault
sizethe size of badge, optional value: large, smallstringsmall
textthe text or number inside badgestring|number-
cornerwhether the badge is at the corner positionbooleanfalse
dotshow badge as a red dotbooleanfalse
overflowcountthe max count to shownumber99
hotthe hot commercial stylebooleanfalse