项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

Badge 徽标 ​

出现在按钮、图标、头像等元素右上角的徽标:value 展示数字或文本,max 超限显示 max+,is-dot 退化为小红点,standalone 时脱离子元素作为行内标签独立使用。value 为空且非红点时不渲染。

基础用法 ​

数值型 value 超过 max 时截断为 max+;字符串 value 原样展示;hidden 为 true 时整体隐藏。

12
99+
new

类型与独立使用 ​

type 更换底色(默认 danger 红);standalone 时不包裹子元素,徽标作为行内元素独立渲染,适合直接排在文本后面。

8
8
8
hot
notice

红点配色 ​

红点模式(is-dot,忽略 value)同样受 type 影响,可用于不同优先级的提醒。

组合图标与头像 ​

default 插槽可包裹任意元素,徽标自动定位到其右上角。

3
荐

动态显隐 ​

hidden 受控切换,徽标隐藏时子元素布局不受影响。

8

API ​

Badge Props

参数说明类型默认值
value显示值,数字超过 max 时截断为 max+;为空且非红点时不渲染string | number
max最大值,超出显示 max+(仅数值型 value 生效)number—
isDot小红点(忽略 value)booleanfalse
hidden隐藏徽标booleanfalse
type底色类型primary | success | warning | info | dangerdanger
standalone独立使用,不定位到子元素右上角booleanfalse

Badge Slots

参数说明类型默认值
default被包裹的子元素(徽标定位其右上角;standalone 时不需要)——