From 1f1c85e2adc2e069b54d32ed2e03755a106fd9f1 Mon Sep 17 00:00:00 2001
From: raylotan <taninsist@gmail.com>
Date: Wed, 14 Aug 2024 10:19:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(tag):=20=E5=AF=B9=E9=BD=90mobile-vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/mobile/mobile.config.js              |    2 +-
 src/_util/parseTNode.ts                   |    4 +-
 src/tag/CheckTag.tsx                      |  106 +-
 src/tag/Tag.tsx                           |  159 ++-
 src/tag/__tests__/index.test.tsx          |  266 ++++
 src/tag/_example/checkable.jsx            |   40 -
 src/tag/_example/checkable.tsx            |   25 +
 src/tag/_example/closable.jsx             |   38 -
 src/tag/_example/closable.tsx             |   25 +
 src/tag/_example/ellipsis.jsx             |   10 -
 src/tag/_example/icon.jsx                 |   13 -
 src/tag/_example/index.jsx                |   65 -
 src/tag/_example/index.tsx                |   31 +
 src/tag/_example/shape.jsx                |   15 -
 src/tag/_example/size.jsx                 |   18 -
 src/tag/_example/size.tsx                 |   25 +
 src/tag/_example/style/index.less         |   39 +-
 src/tag/_example/theme.jsx                |   14 -
 src/tag/_example/theme.tsx                |   42 +
 src/tag/_example/type.tsx                 |   38 +
 src/tag/_example/variant.jsx              |   21 -
 src/tag/defaultProps.ts                   |   23 +
 src/tag/style/index.js                    |    2 +-
 src/tag/tag.md                            |   26 +-
 src/tag/type.ts                           |   41 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 1567 +++++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap |   12 +
 27 files changed, 2284 insertions(+), 383 deletions(-)
 create mode 100644 src/tag/__tests__/index.test.tsx
 delete mode 100644 src/tag/_example/checkable.jsx
 create mode 100644 src/tag/_example/checkable.tsx
 delete mode 100644 src/tag/_example/closable.jsx
 create mode 100644 src/tag/_example/closable.tsx
 delete mode 100644 src/tag/_example/ellipsis.jsx
 delete mode 100644 src/tag/_example/icon.jsx
 delete mode 100644 src/tag/_example/index.jsx
 create mode 100644 src/tag/_example/index.tsx
 delete mode 100644 src/tag/_example/shape.jsx
 delete mode 100644 src/tag/_example/size.jsx
 create mode 100644 src/tag/_example/size.tsx
 delete mode 100644 src/tag/_example/theme.jsx
 create mode 100644 src/tag/_example/theme.tsx
 create mode 100644 src/tag/_example/type.tsx
 delete mode 100644 src/tag/_example/variant.jsx
 create mode 100644 src/tag/defaultProps.ts

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index 457941835..b50fbac08 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -150,7 +150,7 @@ export default {
     {
       title: 'Tag 标签',
       name: 'tag',
-      component: () => import('tdesign-mobile-react/tag/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/tag/_example/index.tsx'),
     },
     {
       title: 'Toast 轻提示',
diff --git a/src/_util/parseTNode.ts b/src/_util/parseTNode.ts
index 468639ee2..6dbd30725 100644
--- a/src/_util/parseTNode.ts
+++ b/src/_util/parseTNode.ts
@@ -1,7 +1,7 @@
-import React, { ReactElement, ReactNode } from 'react';
 import isFunction from 'lodash/isFunction';
-import { TNode } from '../common';
+import React, { ReactElement, ReactNode } from 'react';
 import log from '../_common/js/log';
+import { TNode } from '../common';
 
 // 解析 TNode 数据结构
 export default function parseTNode(
diff --git a/src/tag/CheckTag.tsx b/src/tag/CheckTag.tsx
index 2127a57ec..0ce686633 100644
--- a/src/tag/CheckTag.tsx
+++ b/src/tag/CheckTag.tsx
@@ -1,33 +1,39 @@
-import React, { forwardRef, Ref } from 'react';
 import classNames from 'classnames';
+import React, {
+  forwardRef,
+  memo
+} from 'react';
 import { Icon } from 'tdesign-icons-react';
+import parseTNode from 'tdesign-mobile-react/_util/parseTNode';
+import { StyledProps } from 'tdesign-mobile-react/common';
 import useConfig from '../_util/useConfig';
-import { TdCheckTagProps } from './type';
 import useDefault from '../_util/useDefault';
-import noop from '../_util/noop';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { checkTagDefaultProps } from "./defaultProps";
+import { TdCheckTagProps } from './type';
 
-export interface TagCheckProps extends TdCheckTagProps {
-  className?: string;
-  style?: object;
-}
+export interface TagCheckProps extends TdCheckTagProps, StyledProps { }
 
-const TagCheck: React.FC<TagCheckProps> = React.memo(
-  forwardRef((props, ref: Ref<HTMLButtonElement>) => {
+const TagCheck = memo(
+  forwardRef<HTMLSpanElement, TagCheckProps>((originProps, ref) => {
+    const props = useDefaultProps(originProps, checkTagDefaultProps)
     const {
-      checked = undefined,
-      defaultChecked = undefined,
-      content = '',
+      checked,
+      defaultChecked,
+      content,
       children,
-      style = {},
-      className = '',
-      icon = '',
-      disabled = false,
-      closable = false,
-      size = 'medium',
-      shape = 'square',
-      onClick = noop,
-      onChange = noop,
-      ...other
+      style,
+      className,
+      icon,
+      disabled,
+      closable,
+      size,
+      shape,
+      variant,
+      onClick,
+      onChange,
+      onClose,
+      ...otherProps
     } = props;
 
     const { classPrefix } = useConfig();
@@ -38,46 +44,64 @@ const TagCheck: React.FC<TagCheckProps> = React.memo(
 
     const checkTagClass = classNames(
       `${baseClass}`,
-      `${baseClass}--checkable`,
-      `${baseClass}--shape-${shape}`,
-      `${baseClass}--size-${size}`,
+      // `${baseClass}--checkable`,
+      `${baseClass}--${shape}`,
+      `${baseClass}--${innerChecked ? 'primary' : 'default'}`,
+      `${baseClass}--${size}`,
+      `${baseClass}--${variant}`,
+
       {
-        [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
-        [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
-        [`${classPrefix}-is-checked ${baseClass}--checked`]: innerChecked,
+        [`${baseClass}--closable`]: closable,
+        [`${baseClass}--disabled`]: disabled,
+        [`${baseClass}--checked`]: !disabled && innerChecked,
       },
       className,
     );
 
+    const renderText = () => {
+      if (Array.isArray(content) && content.length === 2) {
+        return innerChecked ? content[0] : content[1];
+      }
+      return content;
+    }
+
+    const childNode = parseTNode(renderText()) || parseTNode(children)
+
     const tagStyle = {
       ...style,
     };
 
     const handleClick = (e) => {
-      if (disabled || closable) {
-        return;
+      if (!props.disabled) {
+        onClick?.(e);
+        onInnerChecked(!innerChecked);
       }
-      onInnerChecked(!innerChecked);
-      onClick({ e });
     };
 
     const handleClose = (e) => {
-      if (disabled) {
-        return;
-      }
       e.stopPropagation();
-      onClick({ e });
+      if (!props.disabled) {
+        onClose?.({ e });
+      }
     };
 
     return (
-      <span className={checkTagClass} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
-        <span className={`${baseClass}__icon`}>{icon}</span>
-        <span className={`${baseClass}__text`}>{content || children}</span>
-        {closable ? (
+      <span
+        ref={ref}
+        className={checkTagClass}
+        aria-disabled={disabled}
+        role="button"
+        onClick={handleClick}
+        style={tagStyle}
+        {...otherProps}
+      >
+        {icon && <span className={`${baseClass}__icon`}>{icon}</span>}
+        <span className={`${baseClass}__text`}>{childNode}</span>
+        {props.closable && (
           <span className={`${baseClass}__icon-close`} onClick={handleClose}>
             <Icon name="close" />
           </span>
-        ) : null}
+        )}
       </span>
     );
   }),
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index fef075672..6b5c67b41 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,93 +1,92 @@
-import React, { useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
+import React, { forwardRef, memo } from 'react';
 import { Icon } from 'tdesign-icons-react';
-import noop from '../_util/noop';
-import { TdTagProps } from './type';
+import parseTNode from 'tdesign-mobile-react/_util/parseTNode';
+import { StyledProps } from 'tdesign-mobile-react/common';
+import useDefaultProps from 'tdesign-mobile-react/hooks/useDefaultProps';
 import useConfig from '../_util/useConfig';
+import { tagDefaultProps } from './defaultProps';
+import { TdTagProps } from './type';
 
-export interface TagProps extends TdTagProps {
-  className: string;
-  style: object;
-}
-
-const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
-  const {
-    className = '',
-    style = {},
-    closable = false,
-    content = null,
-    disabled = false,
-    icon = undefined,
-    maxWidth,
-    children = '',
-    shape = 'square',
-    size = 'medium',
-    theme = 'default',
-    variant = 'dark',
-    onClick = noop,
-    onClose = noop,
-    ...other
-  } = props;
+export interface TagProps extends TdTagProps, StyledProps { }
 
-  const { classPrefix } = useConfig();
-  const baseClass = `${classPrefix}-tag`;
+const Tag = memo(
+  forwardRef<HTMLDivElement, TagProps>((originProps, ref) => {
+    const props = useDefaultProps(originProps, tagDefaultProps)
+    const {
+      className,
+      style,
+      closable,
+      content,
+      disabled,
+      icon,
+      maxWidth,
+      children,
+      shape,
+      size,
+      theme,
+      variant,
+      onClick,
+      onClose,
+      ...otherProps
+    } = props;
 
-  const tagClassNames = classNames(
-    `${baseClass}`,
-    `${baseClass}--theme-${theme}`,
-    `${baseClass}--shape-${shape}`,
-    `${baseClass}--variant-${variant}`,
-    `${baseClass}--size-${size}`,
-    {
-      [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
-      [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
-    },
-    className,
-  );
+    const { classPrefix } = useConfig();
+    const baseClass = `${classPrefix}-tag`;
 
-  const tagStyle = {
-    ...style,
-    maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
-  };
+    const tagClassNames = classNames(
+      `${baseClass}`,
+      `${baseClass}--${theme}`,
+      `${baseClass}--${shape}`,
+      `${baseClass}--${variant}`,
+      `${baseClass}--${size}`,
+      {
+        [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
+        [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
+      },
+      className,
+    );
 
-  const getRenderContent = useCallback(() => {
-    const contentType = typeof content;
-    if (contentType === 'string' || contentType === 'number') {
-      return content;
-    }
-    // if (contentType === 'function') {
-    //   return content();
-    // }
+    const tagStyle = {
+      ...style,
+      maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+    };
 
-    return content;
-  }, [content]);
+    const handleClose = (e) => {
+      e.stopPropagation();
+      if (!props.disabled) {
+        onClose?.({ e });
+      }
+    };
 
-  function onClickClose(e) {
-    if (disabled) {
-      return;
-    }
-    e.stopPropagation();
-    onClose({ e });
-  }
+    const handleClick = (e) => {
+      if (disabled) {
+        return;
+      }
+      onClick?.({ e });
+    };
 
-  const handleClick = (e) => {
-    if (disabled) {
-      return;
-    }
-    onClick({ e });
-  };
+    const ChildNode = parseTNode(content) || parseTNode(children);
 
-  return (
-    <span className={tagClassNames} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
-      <span className={`${baseClass}__icon`}>{icon}</span>
-      <span className={`${baseClass}__text`}>{getRenderContent() || children}</span>
-      {closable ? (
-        <span className={`${baseClass}__icon-close`} onClick={onClickClose}>
-          <Icon name="close" />
-        </span>
-      ) : null}
-    </span>
-  );
-});
+    return (
+      <span
+        className={tagClassNames}
+        style={tagStyle}
+        aria-disabled={props.disabled}
+        role="button"
+        onClick={handleClick}
+        ref={ref}
+        {...otherProps}
+      >
+        {icon && <span className={`${baseClass}__icon`}>{icon}</span>}
+        <span className={`${baseClass}__text`}>{ChildNode}</span>
+        {props.closable && (
+          <span className={`${baseClass}__icon-close`} onClick={handleClose}>
+            <Icon name="close" />
+          </span>
+        )}
+      </span>
+    )
+  }));
 
-export default React.memo(Tag);
+export default Tag;
diff --git a/src/tag/__tests__/index.test.tsx b/src/tag/__tests__/index.test.tsx
new file mode 100644
index 000000000..a57fd3f25
--- /dev/null
+++ b/src/tag/__tests__/index.test.tsx
@@ -0,0 +1,266 @@
+import { describe, vi } from "@test/utils";
+import { fireEvent, render } from '@testing-library/react';
+import React from "react";
+import { Icon } from "tdesign-icons-react";
+import { Tag, TagCheck } from "../index";
+
+const prefix = "t";
+const baseClass = `.${prefix}-tag`
+
+describe("tag", () => {
+  describe("props", () => {
+    it(": content", () => {
+      const { container } = render(<Tag content="tag" />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.textContent).toBe('tag')
+    })
+
+    it(": children", () => {
+      const { container } = render(<Tag>tag</Tag>)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.textContent).toBe('tag')
+    })
+
+    it(": shape", () => {
+      const shape = ["square", "round", "mark"] as ("square" | "round" | "mark")[]
+      shape.forEach(s => {
+        const { container } = render(<Tag shape={s} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        if (s === "mark") {
+          expect($tagItem.classList.contains(`${baseClass}__${s}`))
+        } else if (s === 'round') {
+          expect($tagItem.classList.contains(`${baseClass}__${s}`))
+        } else if (s === "square") {
+          expect($tagItem.classList.contains(`${baseClass}__${s}`))
+        }
+      })
+    })
+
+    it(": theme", () => {
+      const theme = ["default", "primary", "warning", "danger", "success"] as ("default" | "primary" | "warning" | "danger" | "success")[]
+      theme.forEach(t => {
+        const { container } = render(<Tag theme={t} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        expect($tagItem.classList.contains(`${baseClass}--${t}`))
+      })
+    })
+
+    it(": variant", () => {
+      const variant = ["light", "dark"] as ("light" | "dark")[]
+      variant.forEach(v => {
+        const { container } = render(<Tag variant={v} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        expect($tagItem.classList.contains(`${baseClass}--${v}`))
+      })
+    })
+
+    it(": size", () => {
+      const size = ["small", "medium", "large", 'extra-large'] as ("small" | "medium" | "large" | 'extra-large')[]
+      size.forEach(s => {
+        const { container } = render(<Tag size={s} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        if (s === "small") {
+          expect($tagItem.classList.contains(`${baseClass}--${s}`))
+        } else if (s === "medium") {
+          expect($tagItem.classList.contains(`${baseClass}--${s}`))
+        } else if (s === "large") {
+          expect($tagItem.classList.contains(`${baseClass}--${s}`))
+        } else if (s === "extra-large") {
+          expect($tagItem.classList.contains(`${baseClass}--${s}`))
+        }
+      })
+    })
+
+
+    it(": closable", () => {
+      const { container } = render(<Tag closable />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}__icon-close`))
+    })
+
+    it(": disabled", () => {
+      const { container } = render(<Tag disabled />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}--disabled`))
+    })
+
+    it(": icon", () => {
+      const { container } = render(<Tag icon={<Icon name="app" />} />)
+      const $icon = container.querySelector(`${baseClass}__icon`) as HTMLElement
+      expect($icon).toBeTruthy();
+    })
+
+    it(": maxWidth", () => {
+      const { container } = render(<Tag maxWidth={100} />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.style.maxWidth).toBe('100px')
+    })
+
+    it(": defaultChecked", () => {
+      const { container } = render(<TagCheck defaultChecked />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}--checked`))
+    })
+
+  })
+
+  describe('event', () => {
+    it(': click', async () => {
+      const handleClick = vi.fn();
+      const { container } = render(<Tag onClick={handleClick} />);
+      const tag = container.querySelector(`${baseClass}`);
+      fireEvent.click(tag);
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    it(': click disabled', async () => {
+      const handleClick = vi.fn();
+      const { container } = render(<Tag onClick={handleClick} disabled />);
+      const tag = container.querySelector(`${baseClass}`);
+      fireEvent.click(tag);
+      expect(handleClick).not.toHaveBeenCalled()
+    });
+
+    it(': close', async () => {
+      const handleClose = vi.fn();
+      const { container } = render(<Tag onClose={handleClose} closable />);
+      const closeBtn = container.querySelector(`${baseClass}__icon-close`);
+      fireEvent.click(closeBtn);
+      expect(handleClose).toHaveBeenCalled();
+    });
+
+    it(': close disabled', async () => {
+      const handleClose = vi.fn();
+      const { container } = render(<Tag onClose={handleClose} disabled closable />);
+      const closeBtn = container.querySelector(`${baseClass}__icon-close`);
+      fireEvent.click(closeBtn);
+      expect(handleClose).not.toHaveBeenCalled();
+    });
+  })
+})
+
+describe('TagCheck', () => {
+  describe('props', () => {
+    it(': content', () => {
+      const { container } = render(<TagCheck content="tag" />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.textContent).toBe('tag')
+    });
+
+    it(': children', () => {
+      const { container } = render(<TagCheck>tag</TagCheck>)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.textContent).toBe('tag')
+    })
+
+    it(': checked', () => {
+      const { container } = render(<TagCheck defaultChecked content={['已选中态', '未选中态']}></TagCheck>)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}--checked`))
+    });
+
+    it(": closable", () => {
+      const { container } = render(<TagCheck closable />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}__icon-close`))
+    })
+
+    it(": disabled", () => {
+      const { container } = render(<TagCheck disabled />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}--disabled`))
+    })
+
+    it(': icon', () => {
+      const { container } = render(<TagCheck icon={<Icon name="app" />} />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}__icon-check`))
+    })
+
+    it(" defaultChecked", () => {
+      const { container } = render(<TagCheck defaultChecked />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      expect($tagItem.classList.contains(`${baseClass}--checked`))
+    })
+
+    it(": shape", () => {
+      const shape = ['square', 'round', 'mark'] as ('square' | 'round' | 'mark')[]
+      shape.forEach(item => {
+        const { container } = render(<TagCheck shape={item} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        if (item === 'square') {
+          expect($tagItem.classList.contains(`${baseClass}--square`))
+        } else if (item === 'round') {
+          expect($tagItem.classList.contains(`${baseClass}--round`))
+        } else if (item === 'mark') {
+          expect($tagItem.classList.contains(`${baseClass}--mark`))
+        }
+      })
+    })
+
+    it(": size", () => {
+      const size = ['small', 'medium', 'large'] as ('small' | 'medium' | 'large')[]
+      size.forEach(item => {
+        const { container } = render(<TagCheck size={item} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        if (item === 'small') {
+          expect($tagItem.classList.contains(`${baseClass}--small`))
+        } else if (item === 'medium') {
+          expect($tagItem.classList.contains(`${baseClass}--medium`))
+        }
+      })
+    })
+
+    it(": variant", () => {
+      const variants = ['dark', 'light', 'outline', 'light-outline'] as ('dark' | 'light' | 'outline' | 'light-outline')[]
+      variants.forEach(item => {
+        const { container } = render(<TagCheck variant={item} />)
+        const $tagItem = container.querySelector(baseClass) as HTMLElement
+        if (item === 'dark') {
+          expect($tagItem.classList.contains(`${baseClass}--dark`))
+        } else if (item === 'light') {
+          expect($tagItem.classList.contains(`${baseClass}--light`))
+        } else if (item === 'outline') {
+          expect($tagItem.classList.contains(`${baseClass}--outline`))
+        } else if (item === 'light-outline') {
+          expect($tagItem.classList.contains(`${baseClass}--light-outline`))
+        }
+      })
+    })
+  })
+
+  describe('event', () => {
+    it(': click', () => {
+      const handleClick = vi.fn()
+      const { container } = render(<TagCheck onClick={handleClick} />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      fireEvent.click($tagItem)
+      expect(handleClick).toHaveBeenCalled()
+    })
+
+    it(': click disabled', () => {
+      const handleClick = vi.fn()
+      const { container } = render(<TagCheck onClick={handleClick} disabled />)
+      const $tagItem = container.querySelector(baseClass) as HTMLElement
+      fireEvent.click($tagItem)
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+
+    it(': close', () => {
+      const handleClose = vi.fn()
+      const { container } = render(<TagCheck onClose={handleClose} closable />)
+      const closeBtn = container.querySelector(`${baseClass}__icon-close`);
+      fireEvent.click(closeBtn);
+      expect(handleClose).toHaveBeenCalled();
+    })
+
+    it(': close disabled', () => {
+      const handleClose = vi.fn()
+      const { container } = render(<TagCheck onClose={handleClose} closable disabled />)
+      const closeBtn = container.querySelector(`${baseClass}__icon-close`);
+      fireEvent.click(closeBtn);
+      expect(handleClose).not.toHaveBeenCalled();
+    })
+  })
+
+})
diff --git a/src/tag/_example/checkable.jsx b/src/tag/_example/checkable.jsx
deleted file mode 100644
index cc2ffe891..000000000
--- a/src/tag/_example/checkable.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { TagCheck } from 'tdesign-mobile-react';
-
-const TagChecksOptions = [
-  {
-    name: '选中',
-    checked: true,
-  },
-  {
-    name: '未选中',
-    checked: false,
-  },
-  {
-    name: '不可选',
-    checked: false,
-    disabled: true,
-  },
-];
-
-const CheckeableDemo = () => {
-  const [tagChecks, setTagChecks] = useState(TagChecksOptions);
-
-  const onClick = (tagCheckIndex) => {
-    const shallowClone = [...tagChecks];
-    shallowClone[tagCheckIndex].checked = !shallowClone[tagCheckIndex].checked;
-    setTagChecks([...shallowClone]);
-  };
-
-  return (
-    <>
-      {tagChecks.map((item, index) => (
-        <TagCheck key={index} checked={item.checked} disabled={item.disabled} onClick={() => onClick(index)}>
-          {item.name}
-        </TagCheck>
-      ))}
-    </>
-  );
-};
-
-export default CheckeableDemo;
diff --git a/src/tag/_example/checkable.tsx b/src/tag/_example/checkable.tsx
new file mode 100644
index 000000000..67f460ee9
--- /dev/null
+++ b/src/tag/_example/checkable.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { TagCheck } from 'tdesign-mobile-react';
+
+const CheckeableDemo = () => {
+  const variants = ['light', 'dark', 'outline', 'light-outline'];
+
+  return (
+    <>
+      <div className="summary">可选中的标签</div>
+      <div className="tag-demo">
+        <div>
+          {variants.map((item, index) => (
+            <div className='tag-block check-tag-block' key={index}>
+              <div className='check-tag-block__title'>{item}</div>
+              <TagCheck variant={item} size="large" content={['已选中态', '未选中态']}></TagCheck>
+              <TagCheck variant={item} defaultChecked size="large" content={['已选中态', '未选中态']}></TagCheck>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CheckeableDemo;
diff --git a/src/tag/_example/closable.jsx b/src/tag/_example/closable.jsx
deleted file mode 100644
index ea6fd0545..000000000
--- a/src/tag/_example/closable.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import { Tag } from 'tdesign-mobile-react';
-import { Icon } from 'tdesign-icons-react';
-
-const TagOptions = [
-  {
-    size: 'medium',
-    name: '标签',
-  },
-  {
-    name: '标签',
-    size: 'medium',
-    icon: <Icon name="app" />,
-  },
-];
-const ClosableDemo = () => {
-  const [tags, setTags] = useState(TagOptions);
-
-  const onClose = (dex) => {
-    setTags((pre) => {
-      const temp = [...pre];
-      temp.splice(dex, 1);
-      return temp;
-    });
-  };
-
-  return (
-    <>
-      {tags.map((item, index) => (
-        <Tag key={index} theme="primary" closable size={item.size} icon={item.icon} onClose={() => onClose(index)}>
-          标签
-        </Tag>
-      ))}
-    </>
-  );
-};
-
-export default ClosableDemo;
diff --git a/src/tag/_example/closable.tsx b/src/tag/_example/closable.tsx
new file mode 100644
index 000000000..8f9c887e3
--- /dev/null
+++ b/src/tag/_example/closable.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Tag } from 'tdesign-mobile-react';
+
+const ClosableDemo = () => {
+  const tagRef1 = React.useRef();
+  const tagRef2 = React.useRef();
+  const onClickClose = (e) => {
+    if (e === 1) {
+      tagRef1.current.remove();
+    } else {
+      tagRef2.current.remove();
+    }
+  }
+  return (
+    <>
+      <div className="summary">可关闭标签</div>
+      <div className="tag-demo">
+        <Tag ref={tagRef1} closable variant="light" onClose={() => onClickClose(1)}>文字标签</Tag>
+        <Tag ref={tagRef2} closable variant="outline" onClose={() => onClickClose(2)}>文字标签</Tag>
+      </div>
+    </>
+  )
+}
+
+export default ClosableDemo
diff --git a/src/tag/_example/ellipsis.jsx b/src/tag/_example/ellipsis.jsx
deleted file mode 100644
index c8df1f85e..000000000
--- a/src/tag/_example/ellipsis.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-
-const EllipsisDemo = () => (
-  <>
-    <Tag maxWidth={130}>听说超长可以省略听说超长</Tag>
-  </>
-);
-
-export default EllipsisDemo;
diff --git a/src/tag/_example/icon.jsx b/src/tag/_example/icon.jsx
deleted file mode 100644
index fcc65940f..000000000
--- a/src/tag/_example/icon.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-import { Icon } from 'tdesign-icons-react';
-
-const IconDemo = () => (
-  <>
-    <Tag theme="primary" shape="round" icon={<Icon name="app" />}>
-      标签
-    </Tag>
-  </>
-);
-
-export default IconDemo;
diff --git a/src/tag/_example/index.jsx b/src/tag/_example/index.jsx
deleted file mode 100644
index ed06428f3..000000000
--- a/src/tag/_example/index.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { TagCheck } from 'tdesign-mobile-react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import CheckeableDemo from './checkable';
-import ShapeDemo from './shape';
-import ClosableDemo from './closable';
-import ThemeDemo from './theme';
-import VariantDemo from './variant';
-import SizeDemo from './size';
-import EllipsisDemo from './ellipsis';
-
-import './style/index.less';
-import IconDemo from './icon';
-
-export default function Base() {
-  return (
-    <>
-      <TDemoHeader title="Tag 标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
-      <TDemoBlock title="01类型" summary="基础标签">
-        <div className="tag-demo">
-          <ThemeDemo />
-        </div>
-        <div className="tag-demo">
-          <VariantDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="带图标标签">
-        <div className="tag-demo">
-          <IconDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="圆角标签">
-        <div className="tag-demo">
-          <ShapeDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="可关闭标签">
-        <div className="tag-demo">
-          <ClosableDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="超长省略标签">
-        <div className="tag-demo">
-          <EllipsisDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="02 状态" summary="标签状态">
-        <div className="tag-demo">
-          <CheckeableDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="03 规格" summary="标签规格">
-        <div className="group padding-bottom d-flex">
-          <SizeDemo />
-        </div>
-
-        <div className="group d-flex">
-          <TagCheck size="large">点击标签30</TagCheck>
-          <TagCheck size="medium">点击标签24</TagCheck>
-        </div>
-      </TDemoBlock>
-    </>
-  );
-}
diff --git a/src/tag/_example/index.tsx b/src/tag/_example/index.tsx
new file mode 100644
index 000000000..811c713e3
--- /dev/null
+++ b/src/tag/_example/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import CheckeableDemo from './checkable';
+import ClosableDemo from './closable';
+import SizeDemo from './size';
+import './style/index.less';
+import ThemeDemo from './theme';
+import TypeDemo from './type';
+
+export default function Base() {
+  return (
+    <div className='tdesign-mobile-demo'>
+      <h1 className="title">Tag 标签</h1>
+      <p className="summary">用于表明主体的类目，属性或状态。</p>
+      <TDemoBlock title="01 组件类型">
+        <TypeDemo />
+        <ClosableDemo />
+        <CheckeableDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态">
+        <ThemeDemo />
+      </TDemoBlock>
+      <TDemoBlock title="03 组件尺寸">
+        <div className='group padding-bottom d-flex'>
+          <SizeDemo />
+        </div>
+      </TDemoBlock>
+    </div>
+
+  );
+}
diff --git a/src/tag/_example/shape.jsx b/src/tag/_example/shape.jsx
deleted file mode 100644
index cfbe243d0..000000000
--- a/src/tag/_example/shape.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-
-const ShapeDemo = () => (
-  <>
-    <Tag theme="primary" shape="round">
-      圆弧
-    </Tag>
-    <Tag theme="primary" shape="mark">
-      半圆弧
-    </Tag>
-  </>
-);
-
-export default ShapeDemo;
diff --git a/src/tag/_example/size.jsx b/src/tag/_example/size.jsx
deleted file mode 100644
index 164cc8fb3..000000000
--- a/src/tag/_example/size.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-
-const SizeDemo = () => (
-  <>
-    <Tag theme="primary" size="large">
-      展示标签30
-    </Tag>
-    <Tag theme="primary" size="medium">
-      展示标签24
-    </Tag>
-    <Tag theme="primary" size="small">
-      展示标签20
-    </Tag>
-  </>
-);
-
-export default SizeDemo;
diff --git a/src/tag/_example/size.tsx b/src/tag/_example/size.tsx
new file mode 100644
index 000000000..a60a5ca35
--- /dev/null
+++ b/src/tag/_example/size.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Tag } from 'tdesign-mobile-react';
+
+const SizeDemo = () => (
+  <>
+    <div className="tag-container">
+      <div>
+        <div className="tag-block">
+          <Tag size="extra-large" variant="light">加大尺寸</Tag>
+          <Tag size="large" variant="light">大尺寸</Tag>
+          <Tag size="medium" variant="light">中尺寸</Tag>
+          <Tag size="small" variant="light">小尺寸</Tag>
+        </div>
+        <div className="tag-block tag-block1">
+          <Tag size="extra-large" variant="light" closable>加大尺寸</Tag>
+          <Tag size="large" variant="light" closable>大尺寸</Tag>
+          <Tag size="medium" variant="light" closable>中尺寸</Tag>
+          <Tag size="small" variant="light" closable>小尺寸</Tag>
+        </div>
+      </div>
+    </div>
+  </>
+);
+
+export default SizeDemo;
diff --git a/src/tag/_example/style/index.less b/src/tag/_example/style/index.less
index 3aa8c663c..0e62beda1 100644
--- a/src/tag/_example/style/index.less
+++ b/src/tag/_example/style/index.less
@@ -1,14 +1,34 @@
+.tdesign-mobile-demo {
+  background-color: var(--bg-color-demo, #fff)
+}
+
 .tag-demo {
   background-color: #fff;
   padding: 16px;
   display: flex;
 
-  .t-tag + .t-tag {
+  .t-tag+.t-tag {
     margin-left: 16px;
   }
 }
 
-.tag-demo + .tag-demo {
+.tag-block {
+  margin-bottom: 16px;
+}
+
+.check-tag-block {
+  display: flex;
+  align-items: center;
+
+  &__title {
+    color: var(--td-text-color-disabled, rgba(0, 0, 0, 0.4));
+    font-size: 14px;
+    width: 80px;
+    margin-right: 16px;
+  }
+}
+
+.tag-demo+.tag-demo {
   margin-top: 16px;
 }
 
@@ -31,3 +51,18 @@
     margin-right: 16px;
   }
 }
+
+.tag-container {
+  width: 100%;
+}
+
+.tag-block1 {
+  display: flex;
+  justify-content: space-between;
+}
+
+.tag-block1 {
+  >.t-tag {
+    margin: 0;
+  }
+}
diff --git a/src/tag/_example/theme.jsx b/src/tag/_example/theme.jsx
deleted file mode 100644
index 441db18a3..000000000
--- a/src/tag/_example/theme.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-
-const ThemeDemo = () => (
-  <>
-    <Tag theme="primary">标签</Tag>
-    <Tag theme="danger">标签</Tag>
-    <Tag theme="warning">标签</Tag>
-    <Tag theme="success">标签</Tag>
-    <Tag>标签</Tag>
-  </>
-);
-
-export default ThemeDemo;
diff --git a/src/tag/_example/theme.tsx b/src/tag/_example/theme.tsx
new file mode 100644
index 000000000..277cbf488
--- /dev/null
+++ b/src/tag/_example/theme.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tag } from 'tdesign-mobile-react';
+
+const ThemeDemo = () => (
+  <>
+    <div className="summary">展示型标签</div>
+    <div className="tag-demo">
+      <div>
+        <div className="tag-block">
+          <Tag variant="light">默认</Tag>
+          <Tag variant="light" theme="primary">主要</Tag>
+          <Tag variant="light" theme="warning">警告</Tag>
+          <Tag variant="light" theme="danger">危险</Tag>
+          <Tag variant="light" theme="success">成功</Tag>
+        </div>
+        <div className="tag-block">
+          <Tag theme="default">默认</Tag>
+          <Tag theme="primary">主要</Tag>
+          <Tag theme="warning">警告</Tag>
+          <Tag theme="danger">危险</Tag>
+          <Tag theme="success">成功</Tag>
+        </div>
+        <div className="tag-block">
+          <Tag variant="outline">默认</Tag>
+          <Tag variant="outline" theme="primary">主要</Tag>
+          <Tag variant="outline" theme="warning">警告</Tag>
+          <Tag variant="outline" theme="danger">危险</Tag>
+          <Tag variant="outline" theme="success">成功</Tag>
+        </div>
+        <div className="tag-block">
+          <Tag variant="light-outline">默认</Tag>
+          <Tag variant="light-outline" theme="primary">主要</Tag>
+          <Tag variant="light-outline" theme="warning">警告</Tag>
+          <Tag variant="light-outline" theme="danger">危险</Tag>
+          <Tag variant="light-outline" theme="success">成功</Tag>
+        </div>
+      </div>
+    </div>
+  </>
+);
+
+export default ThemeDemo;
diff --git a/src/tag/_example/type.tsx b/src/tag/_example/type.tsx
new file mode 100644
index 000000000..2fce5361a
--- /dev/null
+++ b/src/tag/_example/type.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Icon } from 'tdesign-icons-react';
+import { Tag } from "tdesign-mobile-react";
+
+const TypeDemo = () => (
+  <>
+    <div className="summary">基础标签</div>
+    <div className="tag-demo">
+      <Tag variant="light">标签文字</Tag>
+      <Tag variant="outline">标签文字</Tag>
+    </div>
+    <div className="summary">圆弧标签</div>
+    <div className="tag-demo">
+      <Tag variant="light" shape="round">标签文字</Tag>
+      <Tag variant="outline" shape="round">标签文字</Tag>
+      <Tag variant="outline" shape="mark">标签文字</Tag>
+    </div>
+    <div className="summary">带图标的标签</div>
+    <div className="tag-demo">
+      <Tag
+        variant="light"
+        icon={<Icon name="discount" />}>
+        标签文字
+      </Tag>
+      <Tag
+        variant="outline"
+        icon={<Icon name="discount" />}>
+        标签文字
+      </Tag>
+    </div>
+    <div className="summary">超长文本省略标签</div>
+    <div className="tag-demo">
+      <Tag maxWidth="130px" variant="light">听说超长可以省略听说超长</Tag>
+    </div>
+  </>
+);
+
+export default TypeDemo;
diff --git a/src/tag/_example/variant.jsx b/src/tag/_example/variant.jsx
deleted file mode 100644
index 1731138a3..000000000
--- a/src/tag/_example/variant.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-
-const VariantDemo = () => (
-  <>
-    <Tag theme="primary" variant="dark">
-      深色
-    </Tag>
-    <Tag theme="primary" variant="light">
-      浅色
-    </Tag>
-    <Tag theme="primary" variant="outline">
-      描边
-    </Tag>
-    <Tag theme="primary" variant="light-outline">
-      浅色描边
-    </Tag>
-  </>
-);
-
-export default VariantDemo;
diff --git a/src/tag/defaultProps.ts b/src/tag/defaultProps.ts
new file mode 100644
index 000000000..fba81011f
--- /dev/null
+++ b/src/tag/defaultProps.ts
@@ -0,0 +1,23 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagProps, TdTagProps } from './type';
+
+export const tagDefaultProps: TdTagProps = {
+  closable: false,
+  disabled: false,
+  icon: undefined,
+  shape: 'square',
+  size: 'medium',
+  theme: 'default',
+  variant: 'dark',
+};
+
+export const checkTagDefaultProps: TdCheckTagProps = {
+  closable: false,
+  disabled: false,
+  shape: 'square',
+  size: 'medium',
+  variant: 'dark',
+};
diff --git a/src/tag/style/index.js b/src/tag/style/index.js
index ba353af39..f67ee5024 100644
--- a/src/tag/style/index.js
+++ b/src/tag/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/tag/_index.less';
+import '../../_common/style/mobile/components/tag/v2/_index.less';
diff --git a/src/tag/tag.md b/src/tag/tag.md
index ed8ef2a68..5a12c2a23 100644
--- a/src/tag/tag.md
+++ b/src/tag/tag.md
@@ -1,37 +1,43 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+children | TNode | - | 组件子元素，同`content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | 标签是否可关闭 | N
-content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80。TS 类型：`CSSProperties['maxWidth'] | number` | N
+maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N
 shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
-size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | medium | 标签尺寸。可选项：small/medium/large/extra-large | N
 theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N
 variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
 
+
 ### CheckTag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N
-defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N
+children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | 标签是否可关闭 | N
-content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| array \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | TElement | - | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
+shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。。可选项：square/round/mark | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>组件子元素 | N
+variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
+onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
+onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
diff --git a/src/tag/type.ts b/src/tag/type.ts
index 13261f3d9..bf0fb60c0 100644
--- a/src/tag/type.ts
+++ b/src/tag/type.ts
@@ -4,10 +4,14 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, TElement, SizeEnum } from '../common';
-import { CSSProperties, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
+import { SizeEnum, TElement, TNode } from '../common';
 
 export interface TdTagProps {
+  /**
+   * 组件子元素，同`content`
+   */
+  children?: TNode;
   /**
    * 标签是否可关闭
    * @default false
@@ -29,7 +33,7 @@ export interface TdTagProps {
   /**
    * 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80
    */
-  maxWidth?: CSSProperties['maxWidth'] | number;
+  maxWidth?: string | number;
   /**
    * 标签类型，有三种：方形、圆角方形、标记型
    * @default square
@@ -39,7 +43,7 @@ export interface TdTagProps {
    * 标签尺寸
    * @default medium
    */
-  size?: SizeEnum;
+  size?: 'small' | 'medium' | 'large' | 'extra-large';
   /**
    * 组件风格，用于描述组件不同的应用场景
    * @default default
@@ -53,11 +57,11 @@ export interface TdTagProps {
   /**
    * 点击时触发
    */
-  onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
+  onClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
   /**
    * 如果关闭按钮存在，点击关闭按钮时触发
    */
-  onClose?: (context: { e: MouseEvent<SVGElement> }) => void;
+  onClose?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
 }
 
 export interface TdCheckTagProps {
@@ -66,18 +70,22 @@ export interface TdCheckTagProps {
    */
   checked?: boolean;
   /**
-   * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
+   * 组件子元素
    */
-  defaultChecked?: boolean;
+  children?: TNode;
   /**
    * 标签是否可关闭
    * @default false
    */
   closable?: boolean;
   /**
-   * 组件子元素
+   * 组件子元素；传入数组时：[选中内容，非选中内容]
    */
   content?: TNode;
+  /**
+   * 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性
+   */
+  defaultChecked?: boolean;
   /**
    * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
    * @default false
@@ -88,7 +96,7 @@ export interface TdCheckTagProps {
    */
   icon?: TElement;
   /**
-   * 标签类型，有三种：方形、圆角方形、标记型
+   * 标签类型，有三种：方形、圆角方形、标记型。
    * @default square
    */
   shape?: 'square' | 'round' | 'mark';
@@ -98,11 +106,20 @@ export interface TdCheckTagProps {
    */
   size?: SizeEnum;
   /**
-   * 组件子元素
+   * 标签风格变体
+   * @default dark
+   */
+  variant?: 'dark' | 'light' | 'outline' | 'light-outline';
+  /**
+   * 状态切换时触发
    */
   onChange?: (checked: boolean) => void;
   /**
    * 点击标签时触发
    */
-  onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
+  onClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发
+   */
+  onClose?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
 }
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 5a3922ae3..94f8f30f3 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -4718,6 +4718,1561 @@ exports[`csr snapshot test > csr test src/sticky/_example/offset.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/tag/_example/checkable.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    可选中的标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <div>
+      <div
+        class="tag-block check-tag-block"
+      >
+        <div
+          class="check-tag-block__title"
+        >
+          light
+        </div>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            未选中态
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            已选中态
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block check-tag-block"
+      >
+        <div
+          class="check-tag-block__title"
+        >
+          dark
+        </div>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            未选中态
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            已选中态
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block check-tag-block"
+      >
+        <div
+          class="check-tag-block__title"
+        >
+          outline
+        </div>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            未选中态
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            已选中态
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block check-tag-block"
+      >
+        <div
+          class="check-tag-block__title"
+        >
+          light-outline
+        </div>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            未选中态
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            已选中态
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tag/_example/closable.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    可关闭标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        文字标签
+      </span>
+      <span
+        class="t-tag__icon-close"
+      >
+        <svg
+          class="t-icon t-icon-close"
+        >
+          <use
+            xlink:href="#t-icon-close"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        文字标签
+      </span>
+      <span
+        class="t-tag__icon-close"
+      >
+        <svg
+          class="t-icon t-icon-close"
+        >
+          <use
+            xlink:href="#t-icon-close"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tag/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <h1
+      class="title"
+    >
+      Tag 标签
+    </h1>
+    <p
+      class="summary"
+    >
+      用于表明主体的类目，属性或状态。
+    </p>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="summary"
+        >
+          基础标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+        </div>
+        <div
+          class="summary"
+        >
+          圆弧标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+        </div>
+        <div
+          class="summary"
+        >
+          带图标的标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__icon"
+            >
+              <svg
+                class="t-icon t-icon-discount"
+              >
+                <use
+                  xlink:href="#t-icon-discount"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+            role="button"
+          >
+            <span
+              class="t-tag__icon"
+            >
+              <svg
+                class="t-icon t-icon-discount"
+              >
+                <use
+                  xlink:href="#t-icon-discount"
+                />
+              </svg>
+            </span>
+            <span
+              class="t-tag__text"
+            >
+              标签文字
+            </span>
+          </span>
+        </div>
+        <div
+          class="summary"
+        >
+          超长文本省略标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+            role="button"
+            style="max-width: 130px;"
+          >
+            <span
+              class="t-tag__text"
+            >
+              听说超长可以省略听说超长
+            </span>
+          </span>
+        </div>
+        <div
+          class="summary"
+        >
+          可关闭标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              文字标签
+            </span>
+            <span
+              class="t-tag__icon-close"
+            >
+              <svg
+                class="t-icon t-icon-close"
+              >
+                <use
+                  xlink:href="#t-icon-close"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            aria-disabled="false"
+            class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable"
+            role="button"
+          >
+            <span
+              class="t-tag__text"
+            >
+              文字标签
+            </span>
+            <span
+              class="t-tag__icon-close"
+            >
+              <svg
+                class="t-icon t-icon-close"
+              >
+                <use
+                  xlink:href="#t-icon-close"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+        <div
+          class="summary"
+        >
+          可选中的标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <div>
+            <div
+              class="tag-block check-tag-block"
+            >
+              <div
+                class="check-tag-block__title"
+              >
+                light
+              </div>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  未选中态
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  已选中态
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block check-tag-block"
+            >
+              <div
+                class="check-tag-block__title"
+              >
+                dark
+              </div>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  未选中态
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  已选中态
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block check-tag-block"
+            >
+              <div
+                class="check-tag-block__title"
+              >
+                outline
+              </div>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  未选中态
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  已选中态
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block check-tag-block"
+            >
+              <div
+                class="check-tag-block__title"
+              >
+                light-outline
+              </div>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  未选中态
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  已选中态
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          02 组件状态
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="summary"
+        >
+          展示型标签
+        </div>
+        <div
+          class="tag-demo"
+        >
+          <div>
+            <div
+              class="tag-block"
+            >
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  默认
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  主要
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  警告
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  危险
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  成功
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block"
+            >
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  默认
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  主要
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  警告
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  危险
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  成功
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block"
+            >
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  默认
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  主要
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  警告
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  危险
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  成功
+                </span>
+              </span>
+            </div>
+            <div
+              class="tag-block"
+            >
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  默认
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  主要
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  警告
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  危险
+                </span>
+              </span>
+              <span
+                aria-disabled="false"
+                class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium"
+                role="button"
+              >
+                <span
+                  class="t-tag__text"
+                >
+                  成功
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          03 组件尺寸
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="group padding-bottom d-flex"
+        >
+          <div
+            class="tag-container"
+          >
+            <div>
+              <div
+                class="tag-block"
+              >
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    加大尺寸
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    大尺寸
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    中尺寸
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    小尺寸
+                  </span>
+                </span>
+              </div>
+              <div
+                class="tag-block tag-block1"
+              >
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    加大尺寸
+                  </span>
+                  <span
+                    class="t-tag__icon-close"
+                  >
+                    <svg
+                      class="t-icon t-icon-close"
+                    >
+                      <use
+                        xlink:href="#t-icon-close"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    大尺寸
+                  </span>
+                  <span
+                    class="t-tag__icon-close"
+                  >
+                    <svg
+                      class="t-icon t-icon-close"
+                    >
+                      <use
+                        xlink:href="#t-icon-close"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    中尺寸
+                  </span>
+                  <span
+                    class="t-tag__icon-close"
+                  >
+                    <svg
+                      class="t-icon t-icon-close"
+                    >
+                      <use
+                        xlink:href="#t-icon-close"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  aria-disabled="false"
+                  class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable"
+                  role="button"
+                >
+                  <span
+                    class="t-tag__text"
+                  >
+                    小尺寸
+                  </span>
+                  <span
+                    class="t-tag__icon-close"
+                  >
+                    <svg
+                      class="t-icon t-icon-close"
+                    >
+                      <use
+                        xlink:href="#t-icon-close"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tag/_example/size.tsx 1`] = `
+<div>
+  <div
+    class="tag-container"
+  >
+    <div>
+      <div
+        class="tag-block"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            加大尺寸
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            大尺寸
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            中尺寸
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            小尺寸
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block tag-block1"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            加大尺寸
+          </span>
+          <span
+            class="t-tag__icon-close"
+          >
+            <svg
+              class="t-icon t-icon-close"
+            >
+              <use
+                xlink:href="#t-icon-close"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            大尺寸
+          </span>
+          <span
+            class="t-tag__icon-close"
+          >
+            <svg
+              class="t-icon t-icon-close"
+            >
+              <use
+                xlink:href="#t-icon-close"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            中尺寸
+          </span>
+          <span
+            class="t-tag__icon-close"
+          >
+            <svg
+              class="t-icon t-icon-close"
+            >
+              <use
+                xlink:href="#t-icon-close"
+              />
+            </svg>
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            小尺寸
+          </span>
+          <span
+            class="t-tag__icon-close"
+          >
+            <svg
+              class="t-icon t-icon-close"
+            >
+              <use
+                xlink:href="#t-icon-close"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tag/_example/theme.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    展示型标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <div>
+      <div
+        class="tag-block"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            默认
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            主要
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            警告
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            危险
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            成功
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            默认
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            主要
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            警告
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            危险
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            成功
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            默认
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            主要
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            警告
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            危险
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            成功
+          </span>
+        </span>
+      </div>
+      <div
+        class="tag-block"
+      >
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            默认
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            主要
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            警告
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            危险
+          </span>
+        </span>
+        <span
+          aria-disabled="false"
+          class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium"
+          role="button"
+        >
+          <span
+            class="t-tag__text"
+          >
+            成功
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tag/_example/type.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    基础标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    圆弧标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    带图标的标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__icon"
+      >
+        <svg
+          class="t-icon t-icon-discount"
+        >
+          <use
+            xlink:href="#t-icon-discount"
+          />
+        </svg>
+      </span>
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__icon"
+      >
+        <svg
+          class="t-icon t-icon-discount"
+        >
+          <use
+            xlink:href="#t-icon-discount"
+          />
+        </svg>
+      </span>
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    超长文本省略标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+      style="max-width: 130px;"
+    >
+      <span
+        class="t-tag__text"
+      >
+        听说超长可以省略听说超长
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"<div class="button-group"><button type="button" class="t-button t-button--outline t-button--primary button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--outline t-button--primary button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->半圆形返回顶部</span></button></div>"`;
 
 exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"<div class="tdesign-mobile-react-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">BackTop 返回顶部</h1><p class="tdesign-mobile-demo-header__summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">形状</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="button-group"><button type="button" class="t-button t-button--outline t-button--primary button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--outline t-button--primary button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->半圆形返回顶部</span></button></div></div></div><div class="group"><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div><div class="item"><div class="t-skeleton t-skeleton--text"><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text" style="width:100px"></div></div></div></div></div></div>"`;
@@ -4769,3 +6324,15 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
 exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Sticky 吸顶</h1><p class="tdesign-mobile-demo-header__summary">用于常驻页面顶部的信息，操作展示</p></div><div class="tdesign-demo-block-wrap"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">基础吸顶</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">吸顶距离</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-2"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">指定容器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"<div class="tdesign-demo-block-2" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"<div class="summary">可选中的标签</div><div class="tag-demo"><div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">dark</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light-outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"<div class="summary">可关闭标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><h1 class="title">Tag 标签</h1><p class="summary">用于表明主体的类目，属性或状态。</p><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div><div class="summary">可关闭标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div><div class="summary">可选中的标签</div><div class="tag-demo"><div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">dark</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light-outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="group padding-bottom d-flex"><div class="tag-container"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span></span></div><div class="tag-block tag-block1"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"<div class="tag-container"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span></span></div><div class="tag-block tag-block1"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `"<div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"<div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 29a019ae5..28e86820e 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -51,3 +51,15 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
 exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Sticky 吸顶</h1><p class="tdesign-mobile-demo-header__summary">用于常驻页面顶部的信息，操作展示</p></div><div class="tdesign-demo-block-wrap"><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">基础吸顶</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-1"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--primary custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础吸顶</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">吸顶距离</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-2"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">指定容器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-block-3" id="container"><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--default custom-button custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->指定容器</span></button></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"<div class="tdesign-demo-block-2" data-reactroot=""><div class="t-sticky"><div class="t-sticky__content"><button type="button" class="t-button t-button--base t-button--danger custom-common-button t-size-default t-button--shape-rectangle"><span class="t-button__text"> <!-- -->吸顶距离</span></button></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"<div class="summary">可选中的标签</div><div class="tag-demo"><div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">dark</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light-outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"<div class="summary">可关闭标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><h1 class="title">Tag 标签</h1><p class="summary">用于表明主体的类目，属性或状态。</p><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div><div class="summary">可关闭标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">文字标签</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div><div class="summary">可选中的标签</div><div class="tag-demo"><div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">dark</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--dark" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--dark t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div><div class="tag-block check-tag-block"><div class="check-tag-block__title">light-outline</div><span class="t-tag t-tag--square t-tag--default t-tag--large t-tag--light-outline" aria-disabled="false" role="button"><span class="t-tag__text">未选中态</span></span><span class="t-tag t-tag--square t-tag--primary t-tag--large t-tag--light-outline t-tag--checked" aria-disabled="false" role="button"><span class="t-tag__text">已选中态</span></span></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="group padding-bottom d-flex"><div class="tag-container"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span></span></div><div class="tag-block tag-block1"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"<div class="tag-container"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span></span></div><div class="tag-block tag-block1"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--extra-large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">加大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--large t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">大尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">中尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--small t-is-closable t-tag--closable" aria-disabled="false" role="button"><span class="t-tag__text">小尺寸</span><span class="t-tag__icon-close"><svg class="t-icon t-icon-close"><use xlink:href="#t-icon-close"></use></svg></span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `"<div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"<div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div>"`;