> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 标签

用于可视化分类或标记内容的组件。

<Tabs>
  <Tab title="**用法**">
    ```jsx theme={null}
    import { Tag } from "@/ui/display/tag/components/Tag";

    export const MyComponent = () => {
      return (
        <Tag
          className
          color="red"
          text="Urgent"
          onClick={() => console.log("click")}
        />
      );
    };
    ```
  </Tab>

  <Tab title="属性">
    | 属性        | 类型     | 描述                                                              |
    | --------- | ------ | --------------------------------------------------------------- |
    | className | 字符串    | 用于附加样式的可选名称                                                     |
    | 颜色        | string | 标签的颜色。 选项包括：`绿色`，`绿松石`，`天蓝`，`蓝色`，`紫色`，`粉红色`，`红色`，`橙色`，`黄色`，`灰色` |
    | 文本        | 字符串    | 标签的内容                                                           |
    | onClick   | 函数     | 用户点击标签时的可选调用函数                                                  |
  </Tab>
</Tabs>