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

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

### 基础形态
```tsx
import React from 'react';
import { Tag, Grid } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <div>
      <h4>默认尺寸24px</h4>
      <Row>
        <Col>
          <Tag color="red">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="orange">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="yellow">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="green">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="blue">默认标签</Tag>
        </Col>
      </Row>
      <br />
      <h4>小号尺寸20px</h4>
      <Row>
        <Col>
          <Tag color="red" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="orange" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="yellow" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="green" size="small">默认标签</Tag>
        </Col>
        <Col>
          <Tag color="blue" size="small">默认标签</Tag>
        </Col>
      </Row>
    </div>
  );
};

export const meta = {
  title: '静态展示标签不支持悬停以及激活状态，仅静态展示标签支持彩色样式',
  describe: '',
};

```
### 可交互形态
```tsx
import React from 'react';
import { Tag, Grid, Icon } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  return (
    <div>
      <h4>默认</h4>
      <Row>
        <Col>
          <Tag>默认标签</Tag>
        </Col>
        <Col>
          <Tag.Closable>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag><Icon type="sub-account-line" />默认标签</Tag>
        </Col>
      </Row>
      <br />
      <h4>激活/选中</h4>
      <Row>
        <Col>
          <Tag.Selectable checked>默认标签</Tag.Selectable>
        </Col>
        <Col>
          <Tag.Selectable checked>默认标签<Icon type="close" /></Tag.Selectable>
        </Col>
        <Col>
          <Tag.Selectable checked><Icon type="sub-account-line" />默认标签</Tag.Selectable>
        </Col>
      </Row>
      <br />
      <h4>禁用</h4>
      <Row>
        <Col>
          <Tag disabled>默认标签</Tag>
        </Col>
        <Col>
          <Tag.Closable disabled>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag disabled><Icon type="sub-account-line" />默认标签</Tag>
        </Col>
      </Row>
    </div>
  );
};

export const meta = {
  title: '可点击或可删除类的动态交互标签，不支持彩色样式',
  describe: '',
};

```
## 更多示例
```tsx
```
```tsx
```