Badge

Display an indicator that requires attention.

Default

Show number or text.

Type

Express state in different colors.

Custom color

For more colors, please refer to the 'Colors' section

Sizes

Components of different sizes.

Anchor

Fix the Badge in the designated position.

APIs

Badge.Props

AttributeDescriptionTypeAccepted valuesDefault
typebadge typeNormalTypesNormalTypesdefault
sizebadge sizeNormalSizesNormalSizesmedium
dotshow dot and ignore contentboolean-false
...native propsHTMLAttributes'alt', 'id', 'className', ...-

Badge.Anchor.Props

AttributeDescriptionTypeAccepted valuesDefault
placementfixe position of BadgeAnchorPlacementAnchorPlacementtopRight
...native propsHTMLAttributes'alt', 'id', 'className', ...-

NormalTypes

type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'

NormalSizes

type NormalSizes = 'medium' | 'mini' | 'small' | 'large'

AnchorPlacement

type AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'