标签

标签是对象的属性（例如状态或类型）的文本描述。标签用于对实体进行分类、标记或归类，以及以键值（Key:Value）格式进行标记。

§何时使用

标签随处可见（例如，在卡片、表格、实体页面中），用于指示对象的属性并帮助用户快速识别和分类内容。标签通常显示在相关对象旁边。

另一种应用方式是显示不适合列表的对象数量。在这种情况下，将鼠标悬停在标签上会显示一个包含剩余实体列表的 Popover。

标签还可以用作标签（tags）来组织实体并简化工作流程。

在表格中显示标签时，请限制单元格中的标签数量（每行最多 2-3 个标签，一个表格中最多 2 列标签）以及字符数（最多 20 个字符后跟省略号）。

§结构

1 — 左侧图标：可选且不可交互。用于更快速地检索信息。

2 — 文本：标签不应超过 20 个字符。您可以使用形容词（例如，New、Active、Free）、分词（例如，Stopped）、名词（例如，Discount）和副词。标签文本不应包含动词（例如，Enable）。如果需要使用动词，请改用按钮。

3 — 文本的另一种“键值”（Key:Value）格式版本，用于手动标记对象。例如，您可以将对象标记为“service: delivery”或“release: 23”。

4 — 右侧按钮：可交互。可以是退出图标或复制图标。

§大小

标签有三种尺寸：

XS - 常用于表格、列表、标题、弹出窗口和实体页面。

S - 如果空间充足，用于在表单和其他区域预览新添加的标记。

M - 由于其外观与按钮相似，因此使用频率较低。

§主题

无语义颜色

Default — 默认标签，常用于突出显示信息而不进行语义着色。

Clear — 没有背景，只有轮廓。用于最小化强调。

带语义着色

Unknown — 中性选项，当无需关注标签内信息时使用。

Accent — 用于突出重要信息和“进行中”的操作。

Success — 用于指示已成功完成的流程或实体的“健康状况”。

Warning — 用于紧急情况，例如提醒用户注意某事。

Danger — 用于吸引用户全部注意力，例如发生错误且需要立即采取措施修复时。

§语义标签与按钮

标签（包括带语义着色的标签）用于指示状态。唯一可以与它们交互的方式是悬停在标签上或单击图标。标签不能设置为“选中”状态。如果您需要基于语义标签创建交互式元素（例如，用于状态过滤器），请使用按钮。它们具有按下（应用）状态 - 选中 - 并且可以与语义颜色一起使用。

§修改和状态

所有标签都有五种状态：仅文本、文本前图标、文本后图标、文本前后图标，以及仅图标。

您可以进行交互：

1. 与整个标签进行交互。例如，通过将鼠标悬停在标签上来显示包含详细信息的 Popover。

2. 仅与右侧图标进行交互。根据图标的不同，单击它可能会删除标签或复制其值。

添加标签交互时，请确保它们直观且易于理解。

§附加功能

您可以创建动态过滤器，根据标签对内容进行排序。例如，单击加号图标会添加一个新值，而单击叉号图标会取消过滤器。

如果您的界面允许用户创建自己的标签并标记对象，那么他们也应该能够添加和删除它们。

§定制

标签的颜色、圆角、大小和内边距都可以进行定制。标签内的文本应易于阅读。

当用户将鼠标悬停在标签上时，更改标签的外观或颜色，以指示交互的可能性。