From 66c56cc5c430d02c7897182d4445ceff7988b0aa Mon Sep 17 00:00:00 2001
From: taninsist <taninsist@gmail.com>
Date: Wed, 14 Aug 2024 13:16:36 +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/tag/CheckTag.tsx                      |  159 ++-
 src/tag/Tag.tsx                           |  102 +-
 src/tag/__tests__/index.test.tsx          |  274 ++++
 src/tag/_example/checkable.jsx            |   40 -
 src/tag/_example/checkable.tsx            |   25 +
 src/tag/_example/closable.jsx             |   38 -
 src/tag/_example/closable.tsx             |   29 +
 src/tag/_example/ellipsis.jsx             |   10 -
 src/tag/_example/icon.jsx                 |   13 -
 src/tag/_example/index.jsx                |   65 -
 src/tag/_example/index.tsx                |   30 +
 src/tag/_example/shape.jsx                |   15 -
 src/tag/_example/size.jsx                 |   18 -
 src/tag/_example/size.tsx                 |   41 +
 src/tag/_example/style/index.less         |   39 +-
 src/tag/_example/theme.jsx                |   14 -
 src/tag/_example/theme.tsx                |   66 +
 src/tag/_example/type.tsx                 |   42 +
 src/tag/_example/variant.jsx              |   21 -
 src/tag/defaultProps.ts                   |   24 +
 src/tag/style/index.js                    |    2 +-
 src/tag/tag.en-US.md                      |   44 +
 src/tag/tag.md                            |   21 +-
 src/tag/type.ts                           |   35 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 1567 +++++++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap |   12 +
 27 files changed, 2374 insertions(+), 374 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
 create mode 100644 src/tag/tag.en-US.md

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index 45794183..b50fbac0 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/tag/CheckTag.tsx b/src/tag/CheckTag.tsx
index 2127a57e..1f76e2df 100644
--- a/src/tag/CheckTag.tsx
+++ b/src/tag/CheckTag.tsx
@@ -1,86 +1,105 @@
-import React, { forwardRef, Ref } from 'react';
 import classNames from 'classnames';
+import React, { forwardRef } 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 CheckTagProps extends TdCheckTagProps, StyledProps {}
+
+const CheckTag = forwardRef<HTMLSpanElement, CheckTagProps>((originProps, ref) => {
+  const props = useDefaultProps(originProps, checkTagDefaultProps);
+  const {
+    checked,
+    defaultChecked,
+    content,
+    children,
+    style,
+    className,
+    icon,
+    disabled,
+    closable,
+    size,
+    shape,
+    variant,
+    onClick,
+    onChange,
+    onClose,
+    ...otherProps
+  } = props;
+
+  const { classPrefix } = useConfig();
 
-export interface TagCheckProps extends TdCheckTagProps {
-  className?: string;
-  style?: object;
-}
+  const [innerChecked, onInnerChecked] = useDefault(checked, defaultChecked, onChange);
 
-const TagCheck: React.FC<TagCheckProps> = React.memo(
-  forwardRef((props, ref: Ref<HTMLButtonElement>) => {
-    const {
-      checked = undefined,
-      defaultChecked = undefined,
-      content = '',
-      children,
-      style = {},
-      className = '',
-      icon = '',
-      disabled = false,
-      closable = false,
-      size = 'medium',
-      shape = 'square',
-      onClick = noop,
-      onChange = noop,
-      ...other
-    } = props;
+  const baseClass = `${classPrefix}-tag`;
 
-    const { classPrefix } = useConfig();
+  const checkTagClass = classNames(
+    `${baseClass}`,
+    // `${baseClass}--checkable`,
+    `${baseClass}--${shape}`,
+    `${baseClass}--${innerChecked ? 'primary' : 'default'}`,
+    `${baseClass}--${size}`,
+    `${baseClass}--${variant}`,
 
-    const [innerChecked, onInnerChecked] = useDefault(checked, defaultChecked, onChange);
+    {
+      [`${baseClass}--closable`]: closable,
+      [`${baseClass}--disabled`]: disabled,
+      [`${baseClass}--checked`]: !disabled && innerChecked,
+    },
+    className,
+  );
 
-    const baseClass = `${classPrefix}-tag`;
+  const renderText = () => {
+    if (Array.isArray(content) && content.length === 2) {
+      return innerChecked ? content[0] : content[1];
+    }
+    return content;
+  };
 
-    const checkTagClass = classNames(
-      `${baseClass}`,
-      `${baseClass}--checkable`,
-      `${baseClass}--shape-${shape}`,
-      `${baseClass}--size-${size}`,
-      {
-        [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
-        [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
-        [`${classPrefix}-is-checked ${baseClass}--checked`]: innerChecked,
-      },
-      className,
-    );
+  const childNode = parseTNode(renderText()) || parseTNode(children);
 
-    const tagStyle = {
-      ...style,
-    };
+  const tagStyle = {
+    ...style,
+  };
 
-    const handleClick = (e) => {
-      if (disabled || closable) {
-        return;
-      }
+  const handleClick = (e) => {
+    if (!props.disabled) {
+      onClick?.(e);
       onInnerChecked(!innerChecked);
-      onClick({ e });
-    };
+    }
+  };
 
-    const handleClose = (e) => {
-      if (disabled) {
-        return;
-      }
-      e.stopPropagation();
-      onClick({ e });
-    };
+  const handleClose = (e) => {
+    e.stopPropagation();
+    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 className={`${baseClass}__icon-close`} onClick={handleClose}>
-            <Icon name="close" />
-          </span>
-        ) : null}
-      </span>
-    );
-  }),
-);
+  return (
+    <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>
+      )}
+    </span>
+  );
+});
 
-export default TagCheck;
+export default CheckTag;
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index fef07567..eda89eda 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,32 +1,33 @@
-import React, { useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
+import React, { forwardRef } 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;
-}
+export interface TagProps extends TdTagProps, StyledProps {}
 
-const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
+const Tag = forwardRef<HTMLDivElement, TagProps>((originProps, ref) => {
+  const props = useDefaultProps(originProps, tagDefaultProps);
   const {
-    className = '',
-    style = {},
-    closable = false,
-    content = null,
-    disabled = false,
-    icon = undefined,
+    className,
+    style,
+    closable,
+    content,
+    disabled,
+    icon,
     maxWidth,
-    children = '',
-    shape = 'square',
-    size = 'medium',
-    theme = 'default',
-    variant = 'dark',
-    onClick = noop,
-    onClose = noop,
-    ...other
+    children,
+    shape,
+    size,
+    theme,
+    variant,
+    onClick,
+    onClose,
+    ...otherProps
   } = props;
 
   const { classPrefix } = useConfig();
@@ -34,10 +35,10 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
 
   const tagClassNames = classNames(
     `${baseClass}`,
-    `${baseClass}--theme-${theme}`,
-    `${baseClass}--shape-${shape}`,
-    `${baseClass}--variant-${variant}`,
-    `${baseClass}--size-${size}`,
+    `${baseClass}--${theme}`,
+    `${baseClass}--${shape}`,
+    `${baseClass}--${variant}`,
+    `${baseClass}--${size}`,
     {
       [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
       [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
@@ -50,44 +51,41 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
   };
 
-  const getRenderContent = useCallback(() => {
-    const contentType = typeof content;
-    if (contentType === 'string' || contentType === 'number') {
-      return content;
-    }
-    // if (contentType === 'function') {
-    //   return content();
-    // }
-
-    return content;
-  }, [content]);
-
-  function onClickClose(e) {
-    if (disabled) {
-      return;
-    }
+  const handleClose = (e) => {
     e.stopPropagation();
-    onClose({ e });
-  }
+    if (!props.disabled) {
+      onClose?.({ e });
+    }
+  };
 
   const handleClick = (e) => {
     if (disabled) {
       return;
     }
-    onClick({ e });
+    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}>
+    <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>
-      ) : null}
+      )}
     </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 00000000..4724304c
--- /dev/null
+++ b/src/tag/__tests__/index.test.tsx
@@ -0,0 +1,274 @@
+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 cc2ffe89..00000000
--- 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 00000000..242ea7ad
--- /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 ea6fd054..00000000
--- 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 00000000..58f0af0b
--- /dev/null
+++ b/src/tag/_example/closable.tsx
@@ -0,0 +1,29 @@
+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 c8df1f85..00000000
--- 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 fcc65940..00000000
--- 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 ed06428f..00000000
--- 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 00000000..3516b28b
--- /dev/null
+++ b/src/tag/_example/index.tsx
@@ -0,0 +1,30 @@
+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 cfbe243d..00000000
--- 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 164cc8fb..00000000
--- 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 00000000..acd70710
--- /dev/null
+++ b/src/tag/_example/size.tsx
@@ -0,0 +1,41 @@
+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 3aa8c663..0e62beda 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 441db18a..00000000
--- 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 00000000..a80205fe
--- /dev/null
+++ b/src/tag/_example/theme.tsx
@@ -0,0 +1,66 @@
+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 00000000..18810aed
--- /dev/null
+++ b/src/tag/_example/type.tsx
@@ -0,0 +1,42 @@
+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 1731138a..00000000
--- 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 00000000..d336e0b8
--- /dev/null
+++ b/src/tag/defaultProps.ts
@@ -0,0 +1,24 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTagProps, TdCheckTagProps } from './type';
+
+export const tagDefaultProps: TdTagProps = {
+  closable: false,
+  disabled: false,
+  icon: undefined,
+  shape: 'square',
+  size: 'medium',
+  theme: 'default',
+  variant: 'dark',
+};
+
+export const checkTagDefaultProps: TdCheckTagProps = {
+  defaultChecked: undefined,
+  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 ba353af3..f67ee502 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.en-US.md b/src/tag/tag.en-US.md
new file mode 100644
index 00000000..9f20d86a
--- /dev/null
+++ b/src/tag/tag.en-US.md
@@ -0,0 +1,44 @@
+:: BASE_DOC ::
+
+## API
+
+### Tag Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closable | Boolean | false | \- | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+disabled | Boolean | false | \- | N
+icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+maxWidth | String / Number | - | \- | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large/extra-large | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+
+### CheckTag Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+checked | Boolean | undefined | \- | N
+defaultChecked | Boolean | undefined | uncontrolled property | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closable | Boolean | false | \- | N
+content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+disabled | Boolean | false | \- | N
+icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+variant | String | dark | options: dark/light/outline/light-outline | N
+onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
diff --git a/src/tag/tag.md b/src/tag/tag.md
index ed8ef2a6..c26f2ad8 100644
--- a/src/tag/tag.md
+++ b/src/tag/tag.md
@@ -1,37 +1,44 @@
 :: 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
+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 \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | 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
 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
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | 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 13261f3d..ee6c17c5 100644
--- a/src/tag/type.ts
+++ b/src/tag/type.ts
@@ -5,9 +5,13 @@
  * */
 
 import { TNode, TElement, SizeEnum } from '../common';
-import { CSSProperties, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 
 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
@@ -57,7 +61,7 @@ export interface TdTagProps {
   /**
    * 如果关闭按钮存在，点击关闭按钮时触发
    */
-  onClose?: (context: { e: MouseEvent<SVGElement> }) => void;
+  onClose?: (context: { e: MouseEvent<SVGSVGElement> }) => void;
 }
 
 export interface TdCheckTagProps {
@@ -69,15 +73,19 @@ export interface TdCheckTagProps {
    * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
    */
   defaultChecked?: boolean;
+  /**
+   * 组件子元素
+   */
+  children?: TNode;
   /**
    * 标签是否可关闭
    * @default false
    */
   closable?: boolean;
   /**
-   * 组件子元素
+   * 组件子元素；传入数组时：[选中内容，非选中内容]
    */
-  content?: TNode;
+  content?: [] | TNode;
   /**
    * 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态
    * @default false
@@ -98,11 +106,24 @@ export interface TdCheckTagProps {
    */
   size?: SizeEnum;
   /**
-   * 组件子元素
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签风格变体
+   * @default dark
+   */
+  variant?: 'dark' | 'light' | 'outline' | 'light-outline';
+  /**
+   * 状态切换时触发
    */
   onChange?: (checked: boolean) => void;
   /**
    * 点击标签时触发
    */
   onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
+  /**
+   * 如果关闭按钮存在，点击关闭按钮时触发
+   */
+  onClose?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
 }
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 5a3922ae..94f8f30f 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 29a019ae..28e86820 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>"`;