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

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

## 基本使用
```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"
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 设置边框
```tsx preview
import React from "react";
import { CndTag } from "@ali/cnd";

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

export default Demo;
```