定价

Tag

Figma 源代码

以可交互标签表达标记、筛选条件或路径片段，适合组织内容与收敛选择范围。

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

如何使用

用于带边界的标签内容及公开的关闭操作。关闭和选中是不同语义；需要独立按钮或选择控件时使用对应组件。

  • closable 显示关闭操作，onClose 通知页面移除数据；关闭不会替页面修改列表。

  • variant、shape 和 toggle 分别控制外观、形状与切换能力；parts 仅配置默认关闭按钮。

  • 内置关闭按钮名称随LocaleProvider更新，可用Provider messages覆盖；标签内容与关闭后移除责任仍由调用方负责。

导入

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

用法

可移除

形状

带圆点

API 参考

属性 类型 默认值 示例 描述
parts ComponentPartsOf<{ Button: typeof Button }> — parts={partsOptions} 配置组件生成的关闭 Button；不影响显式 children 内的按钮。
variant "default" | "active" "default" variant="default" 视觉变体。default = Black/4% 背景；active = Brand 10% 背景 + Brand 文字
toggle boolean false toggle Toggle 模式语法糖。内部自动注入 Click={{ Idle: "Active", Active: "Idle" }} 与 whileClick=false；Active 状态由 Frame 输出的 data-state="Active" 触发 Brand 激活态；aria-pressed 自动输出。消费方可继续传 Click / whileClick 显式覆盖。
closable boolean false closable 是否显示内置删除 X（hover Tag 时显形）
shape "default" | "left-arrow" | "right-arrow" "default" shape="default" 外壳形状，用于路径 / 面包屑片段
onClose (event: MouseEvent) => void — onClose={(value) => { /* handle value */ }} 点击 X 时回调（不直接销毁 Tag，移除逻辑由消费方决定）
children Snippet — <Tag>Content</Tag> 标签显示内容，由 Frame 的 children 渲染协议承接；关闭按钮由组件另行管理。