Badge 徽标

Badge 现在同时覆盖 Rue 轻标签、角标计数、状态点和 Ribbon 包裹四类场景。展示基础 daisyUI 风格标签写法，同时补充常见业务中的 count、dot、showZero、offset、status 与 Badge.Ribbon 能力。

使用建议

只有 children 时，Badge 会保持 Rue 的标签模式；一旦传入 count、dot、status、color、offset 等语义属性，就会自动切换为 indicator 模式，把徽标放到目标元素角上。

# Badge

最基础的标签模式，保持 Rue 当前的视觉表达。

Badge

# Count as indicator

count、dot 与 text 能力让 Badge 可以直接包裹按钮、卡片或头像占位块。

123

API 网关

持续可用

# Overflow count and zero

支持 overflowCount、showZero 和独立数字徽标，适合消息、工单和待处理数据。

99+07待审核

# Status and custom color

除了预设色调，还能用 status 表达语义，用自定义 color 匹配品牌色或业务色。

同步中发布窗口

Edge cache

24自定义品牌色

# Offset positioning

通过 offset 调整角标与目标元素的相对位置，避免被圆角、阴影或较大的 padding 吞掉。

Default offset

Custom offset

# Badge.Ribbon

Ribbon 复合组件可用于给内容块打上 Beta、新功能或促销等斜角标识。

Beta

Route Insights

将路由、指标和实验开关收在同一个控制面板里。

新功能

Agent Inbox

把消息、工单和批注集中在一处，减少多面板切换。

# Badge sizes

使用尺寸层级，适合标题、列表标签和紧凑信息位。

XsmallSmallMediumLargeXlarge

# Badge with colors

使用 Rue 当前的主题色集合，可直接作为轻量标签使用。

PrimarySecondaryAccentNeutralInfoSuccessWarningError

# Badge with soft style

柔和填充在筛选项、只读标签和提示性元信息里更轻。

PrimarySecondaryAccentInfoSuccessWarningError

# Badge with outline style

描边更适合放在浅底卡片里，避免色块过重。

PrimarySecondaryAccentInfoSuccessWarningError

# Badge with dash style

虚线视觉适合草稿、实验态或尚未生效的标签。

PrimarySecondaryAccentInfoSuccessWarningError

# neutral badge with outline or dash style

展示基础 neutral 组合示例，适合放在亮色背景之上。

OutlineDash

# Badge ghost

ghost 适合嵌在复杂背景里，只保持极轻的存在感。

ghost

# Empty badge

空内容 badge 仍可作为占位点或尺寸对比使用。

# Badge with icon

徽标内部可以直接放图标或图标与文案组合。

InfoSuccessWarningError

# Badge in a text

与正文和标题排版结合时，尺寸可以跟随字号层级一起变化。

Heading 1 BadgeHeading 2 BadgeHeading 3 BadgeHeading 4 BadgeHeading 5 Badge

Paragraph Badge

# Badge in a button

按钮内嵌标签写法仍可直接使用，适合快捷状态或数字提示。

API

标签模式与 indicator 模式共用同一个 Badge 组件：只传 children 时渲染为标签；传入 count、dot、status、color、offset 等语义属性后切换为角标模式。Ribbon 通过 Badge.Ribbon 提供。

Badge

属性	说明	类型	默认值
`className`	根节点类名；标签模式与 indicator 模式都会透传	`string`	`-`
`color`	自定义状态点或计数背景色；也支持直接传入预设色名称	`string`	`-`
`count`	显示在右上角或独立模式中的计数内容	`any`	`-`
`dash`	标签模式下启用虚线风格；计数徽标也会使用该视觉	`boolean`	`false`
`dot`	以状态点代替数字	`boolean`	`false`
`ghost`	标签模式下启用 ghost 视觉	`boolean`	`false`
`indicatorClassName`	仅作用于右上角 indicator 节点	`string`	`-`
`indicatorStyle`	仅作用于右上角 indicator 节点的内联样式	`Record<string, any>`	`-`
`offset`	调整 indicator 的水平与垂直偏移	`[number \| string, number \| string]`	`-`
`outline`	标签模式下启用描边视觉；计数徽标也会使用该视觉	`boolean`	`false`
`overflowCount`	数字上限，超出时显示 n+	`number`	`99`
`showZero`	count 为 0 时是否仍显示角标	`boolean`	`false`
`size`	标签与计数徽标尺寸，支持 xs 到 xl，以及 small、medium 别名	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'small' \| 'medium'`	`-`
`soft`	标签模式下启用柔和填充视觉	`boolean`	`false`
`status`	状态点语义；processing 会附带脉冲动画	`'default' \| 'processing' \| 'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	`-`
`text`	独立状态或计数模式的说明文字；包裹模式下会显示在目标元素右侧	`any`	`-`
`title`	悬浮提示文本，未传时数字徽标默认使用 count 文本	`string`	`-`
`variant`	Rue 预设主题色，也作为状态与计数徽标的默认色调来源	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	`-`

Badge.Ribbon

属性	说明	类型	默认值
`children`	被 Ribbon 包裹的内容区域	`any`	`-`
`className`	Ribbon 条本身的类名	`string`	`-`
`color`	Ribbon 条颜色；支持预设色名称或自定义色值	`string`	`-`
`placement`	Ribbon 条停靠方向	`'start' \| 'end'`	`'end'`
`style`	Ribbon 条内联样式	`Record<string, any>`	`-`
`text`	Ribbon 内部文案	`any`	`-`