cnd-components-mcp/componentData/components/CndTag.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---
# CndTag 风险等级标签

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-tag

## 基本使用

```tsx preview
import React from "react";
import { CndTag } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndTag tagText="公测" tagType="info" style={{ marginRight: 10 }} />
      <CndTag tagText="高危" tagType="high" style={{ marginRight: 10 }} />
      <CndTag tagText="中危" tagType="middle" style={{ marginRight: 10 }} />
      <CndTag tagText="低危" tagType="warning" style={{ marginRight: 10 }} />
      <CndTag tagText="健康" tagType="safe" />
    </div>
  );
};

export default Demo;
```

## 自定义标签颜色

```tsx preview
import React from "react";
import { CndTag } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndTag tagText="使用默认自定义标签" tagType="auto" />
      <br />
      <CndTag
        tagText="自定义标签颜色"
        tagType="auto"
        tagColor="#fff"
        tagBgColor="#ccc"
      />
    </div>
  );
};

export default Demo;
```

## 设置边框

```tsx preview
import React from "react";
import { CndTag } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndTag tagText="健康" tagType="safe" hasBorder={true} />
      <br />
      <CndTag
        tagText="自定义标签"
        tagType="auto"
        tagColor="#01c1b2"
        tagBgColor="#fff"
        hasBorder={true}
        style={{marginTop: 10}}
      />
    </div>
  );
};

export default Demo;
```

## API

| 属性       | 说明                                                                                                            | 类型    | 默认值 |
| ---------- | --------------------------------------------------------------------------------------------------------------- | ------- | ------ |
| tagText    | 标签文本                                                                                                        | string  | ""     |
| tagType    | 标签类型，支持 "info" \|"high" \|"middle" \|"warning" \|"safe" \|"auto"<br />标签类型为"auto"，可自定义标签颜色 | string  | ""     |
| tagColor   | 文字颜色                                                                                                        | string  | ""     |
| tagBgColor | 标签背景色                                                                                                      | string  | ""     |
| hasBorder  | 是否设置边框，颜色取 tagColor                                                                                   | boolean | false  |
| style      | 标签额外样式设置                                                                                                | object  | {}     |