Badge

Display an indicator that requires attention.

Standard

Show number or text.

Type

Express state in different colors.

Custom color

For more colors, please refer to the color section.

Sizes

Components of different sizes.

Anchor

Fix the Badge in the designated position.

APIs / Schnittstellendokumentation

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'

Co-Creators