Badge

用紧凑的数字、文字或圆点提示未读数量与状态，可搭配按钮、头像和导航项使用。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于简短状态或数量提示。需要用户点击执行动作时使用 Button；输入中的可操作标签按 Chip 或 Tag 的交互选择。

children 优先于 count；显式 dot 只显示圆点，不显示内容。
数量默认最大显示 99，零默认隐藏；使用 max / showZero 修改。Avatar 或 Icon 上的角标用 as="badge"。

导入

import { Badge } from '@snowui-design-system/components';

用法

圆点徽标

尺寸

颜色

变体

API 参考

属性	类型	默认值	示例	描述
`variant`	`"filled" \| "border"`	`"filled"`	`variant="filled"`	视觉变体。`border` 与 Kbd 默认 `border` 视觉一致：透明背景、内描边、继承文字色、0×4px padding 与 6px 圆角
`count`	`number \| string`	`—`	`count="Example"`	徽标数字或文字；数字超过 max 显示 max+，普通字符串保持原文。0 和字符串 "0" 默认隐藏，showZero 可保留；stateCount 命中状态时覆盖此值。
`stateCount`	`StateValueMap<number \| string>`	`—`	`stateCount={stateCountOptions}`	根据最近父级 Frame 状态映射 `count`，用于声明式控制 Badge 显隐
`dot`	`boolean`	`—`	`dot`	true 强制圆点，false 使用内容模式；未传时仅在解析后的 count 为 undefined 且没有 children 时自动显示圆点。
`max`	`number`	`99`	`max={42}`	数字模式的最大值 (超过显示 max+)
`showZero`	`boolean`	`false`	`showZero`	false 时隐藏数值 0、字符串 "0" 及无内容的非圆点徽标；true 保留。圆点与 loading 显示不受零值隐藏控制。
`color`	`SnowUIColor \| string`	`"Brand"`	`color="Example"`	filled 与 dot 的填充颜色，支持 PascalCase 语义色及 CSS 颜色值；filled 文字保持白色，border 内容模式仍使用透明背景与继承文字色。
`size`	`ResourceSize`	`—`	`size={value}`	12/16/20/24/28/32/40/48/80；未指定时读取父级尺寸上下文。border 内容模式保持文字 Hug；作为 Avatar/Icon 角标时尺寸由宿主角标协议解析。
`children`	`Snippet`	`—`	`<Badge>Content</Badge>`	自定义徽标内容，显示优先于 count；有 children 且未指定 dot 时使用内容模式，dot=true 时不渲染这些内容。