diff --git a/.dumirc.ts b/.dumirc.ts
index 31a999814..0dd578982 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -111,6 +111,7 @@ export default defineConfig({
           children: [
             { title: 'Form 表单', link: '/components/form' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Select 选择器', link: '/components/select' },
           ],
         },
         {
@@ -120,6 +121,7 @@ export default defineConfig({
             { title: 'Descriptions 描述列表', link: '/components/descriptions' },
             { title: 'Table 表格', link: '/components/table' },
             { title: 'Tabs 标签页', link: '/components/tabs' },
+            { title: 'Tag 标签', link: '/components/tag' },
             { title: 'Tooltip 文字提示', link: '/components/tooltip' },
           ],
         },
diff --git a/packages/design/src/config-provider/demo/size.tsx b/packages/design/src/config-provider/demo/size.tsx
index 6cc84f02d..b3d2471e9 100644
--- a/packages/design/src/config-provider/demo/size.tsx
+++ b/packages/design/src/config-provider/demo/size.tsx
@@ -48,7 +48,7 @@ const App: React.FC = () => {
           </Tabs>
           <Input.Search allowClear />
           <Input.TextArea allowClear />
-          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
+          <Select defaultValue="demo" options={[{ value: 'demo', label: 'demo' }]} />
           <DatePicker />
           <DatePicker.RangePicker />
           <Button>Button</Button>
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
index 7bc546559..b93568656 100644
--- a/packages/design/src/index.ts
+++ b/packages/design/src/index.ts
@@ -17,6 +17,8 @@ export { message, notification, token } from './static-function';
 export { default as Table } from './table';
 
 export { default as Tabs } from './tabs';
+export { default as Tag } from './tag';
+export { default as Select } from './select';
 export type { TabsProps } from './tabs';
 
 export { default as theme } from './theme';
diff --git a/packages/design/src/select/demo/custom-tag-render.tsx b/packages/design/src/select/demo/custom-tag-render.tsx
new file mode 100644
index 000000000..694b04de0
--- /dev/null
+++ b/packages/design/src/select/demo/custom-tag-render.tsx
@@ -0,0 +1,31 @@
+import { Select, Tag } from '@oceanbase/design';
+import React from 'react';
+
+const options = ['gold', 'green', 'red', 'cyan'];
+
+const tagRender = props => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag color={value} onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+      {label}
+    </Tag>
+  );
+};
+
+const App: React.FC = () => (
+  <>
+    <Select
+      mode="multiple"
+      tagRender={tagRender}
+      defaultValue={['gold', 'cyan']}
+      style={{ width: '100%' }}
+      options={options.map(item => ({ label: item, value: item }))}
+    />
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/select/demo/tags.tsx b/packages/design/src/select/demo/tags.tsx
new file mode 100644
index 000000000..7f07e6cc2
--- /dev/null
+++ b/packages/design/src/select/demo/tags.tsx
@@ -0,0 +1,28 @@
+import { Select } from '@oceanbase/design';
+import React from 'react';
+import type { SelectProps } from '@oceanbase/design';
+
+const options: SelectProps['options'] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({
+    value: i.toString(36) + i,
+    label: i.toString(36) + i,
+  });
+}
+
+const handleChange = (value: string) => {
+  console.log(`selected ${value}`);
+};
+
+const App: React.FC = () => (
+  <Select
+    mode="tags"
+    style={{ width: '100%' }}
+    placeholder="Tags Mode"
+    onChange={handleChange}
+    options={options}
+  />
+);
+
+export default App;
\ No newline at end of file
diff --git a/packages/design/src/select/index.md b/packages/design/src/select/index.md
new file mode 100644
index 000000000..5729f6bed
--- /dev/null
+++ b/packages/design/src/select/index.md
@@ -0,0 +1,16 @@
+---
+title: Select 选择器
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全兼容 antd [Select](https://ant.design/components/select-cn/) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<code src="./demo/custom-tag-render.tsx" title="自定义选择标签" description="允许自定义选择标签的样式"></code>
+<code src="./demo/tags.tsx" title="标签" description="tags select，随意输入的内容（scroll the menu）。"></code>
+
+- 详见 antd Select 文档: https://ant.design/components/select-cn/
diff --git a/packages/design/src/select/index.ts b/packages/design/src/select/index.ts
deleted file mode 100644
index f891e54a5..000000000
--- a/packages/design/src/select/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/select';
diff --git a/packages/design/src/select/index.tsx b/packages/design/src/select/index.tsx
new file mode 100644
index 000000000..2027bfd0e
--- /dev/null
+++ b/packages/design/src/select/index.tsx
@@ -0,0 +1,30 @@
+import { Select as AntSelect } from 'antd';
+import type { SelectProps as AntSelectProps } from 'antd/es/select';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+const { Option, OptGroup } = AntSelect;
+
+export * from 'antd/es/select';
+
+export type SelectProps = AntSelectProps;
+
+const Select: any = ({ prefixCls: customizePrefixCls, className, ...restProps }: SelectProps) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
+
+  const selectCls = classNames(className);
+  return wrapSSR(<AntSelect prefixCls={customizePrefixCls} className={selectCls} {...restProps} />);
+};
+
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = AntSelect.displayName;
+}
+
+export default Select;
diff --git a/packages/design/src/select/style/index.ts b/packages/design/src/select/style/index.ts
new file mode 100644
index 000000000..4ab0ecb93
--- /dev/null
+++ b/packages/design/src/select/style/index.ts
@@ -0,0 +1,24 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type SelectToken = FullToken<'Select'>;
+
+export const genSelectStyle: GenerateStyle<SelectToken> = (token: SelectToken): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-multiple`]: {
+      [`${componentCls}-selection-item`]: {
+        border: `1px solid ${token.colorBorder}66`,
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Select', (token: SelectToken) => {
+    return [genSelectStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
diff --git a/packages/design/src/tag/demo/basic.tsx b/packages/design/src/tag/demo/basic.tsx
new file mode 100644
index 000000000..ff4cb23b9
--- /dev/null
+++ b/packages/design/src/tag/demo/basic.tsx
@@ -0,0 +1,28 @@
+import { Tag } from '@oceanbase/design';
+import React from 'react';
+
+const log = (e: React.MouseEvent<HTMLElement>) => {
+  console.log(e);
+};
+
+const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
+  e.preventDefault();
+  console.log('Clicked! But prevent default.');
+};
+
+const App: React.FC = () => (
+  <>
+    <Tag>Tag 1</Tag>
+    <Tag>
+      <a href="https://github.com/oceanbase/oceanbase-design">Link</a>
+    </Tag>
+    <Tag closable onClose={log}>
+      Tag 2
+    </Tag>
+    <Tag closable onClose={preventDefault}>
+      Prevent Default
+    </Tag>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/borderless.tsx b/packages/design/src/tag/demo/borderless.tsx
new file mode 100644
index 000000000..be2ff5b48
--- /dev/null
+++ b/packages/design/src/tag/demo/borderless.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Divider, Space, Tag } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false}>Tag 1</Tag>
+        <Tag bordered={false}>Tag 2</Tag>
+        <Tag bordered={false} closable>
+          Tag 3
+        </Tag>
+        <Tag bordered={false} closable>
+          Tag 4
+        </Tag>
+      </Space>
+      <Divider />
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false} color="processing">
+          processing
+        </Tag>
+        <Tag bordered={false} color="success">
+          success
+        </Tag>
+        <Tag bordered={false} color="error">
+          error
+        </Tag>
+        <Tag bordered={false} color="warning">
+          warning
+        </Tag>
+        <Tag bordered={false} color="magenta">
+          magenta
+        </Tag>
+        <Tag bordered={false} color="red">
+          red
+        </Tag>
+        <Tag bordered={false} color="volcano">
+          volcano
+        </Tag>
+        <Tag bordered={false} color="orange">
+          orange
+        </Tag>
+        <Tag bordered={false} color="gold">
+          gold
+        </Tag>
+        <Tag bordered={false} color="lime">
+          lime
+        </Tag>
+        <Tag bordered={false} color="green">
+          green
+        </Tag>
+        <Tag bordered={false} color="cyan">
+          cyan
+        </Tag>
+        <Tag bordered={false} color="blue">
+          blue
+        </Tag>
+        <Tag bordered={false} color="geekblue">
+          geekblue
+        </Tag>
+        <Tag bordered={false} color="purple">
+          purple
+        </Tag>
+      </Space>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/tag/demo/checkable.tsx b/packages/design/src/tag/demo/checkable.tsx
new file mode 100644
index 000000000..b13fd760f
--- /dev/null
+++ b/packages/design/src/tag/demo/checkable.tsx
@@ -0,0 +1,33 @@
+import { Tag } from '@oceanbase/design';
+import React, { useState } from 'react';
+
+const { CheckableTag } = Tag;
+
+const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
+
+const App: React.FC = () => {
+  const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);
+
+  const handleChange = (tag: string, checked: boolean) => {
+    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
+    console.log('You are interested in: ', nextSelectedTags);
+    setSelectedTags(nextSelectedTags);
+  };
+
+  return (
+    <>
+      <span style={{ marginRight: 8 }}>Categories:</span>
+      {tagsData.map(tag => (
+        <CheckableTag
+          key={tag}
+          checked={selectedTags.indexOf(tag) > -1}
+          onChange={checked => handleChange(tag, checked)}
+        >
+          {tag}
+        </CheckableTag>
+      ))}
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/tag/demo/color.tsx b/packages/design/src/tag/demo/color.tsx
new file mode 100644
index 000000000..f5f50f5d2
--- /dev/null
+++ b/packages/design/src/tag/demo/color.tsx
@@ -0,0 +1,30 @@
+import { Tag, Divider } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Divider orientation="left">Presets</Divider>
+    <div>
+      <Tag color="magenta">magenta</Tag>
+      <Tag color="red">red</Tag>
+      <Tag color="volcano">volcano</Tag>
+      <Tag color="orange">orange</Tag>
+      <Tag color="gold">gold</Tag>
+      <Tag color="lime">lime</Tag>
+      <Tag color="green">green</Tag>
+      <Tag color="cyan">cyan</Tag>
+      <Tag color="blue">blue</Tag>
+      <Tag color="geekblue">geekblue</Tag>
+      <Tag color="purple">purple</Tag>
+    </div>
+    <Divider orientation="left">Custom</Divider>
+    <div>
+      <Tag color="#f50">#f50</Tag>
+      <Tag color="#2db7f5">#2db7f5</Tag>
+      <Tag color="#87d068">#87d068</Tag>
+      <Tag color="#108ee9">#108ee9</Tag>
+    </div>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx
new file mode 100644
index 000000000..b3267850b
--- /dev/null
+++ b/packages/design/src/tag/demo/ellipsis.tsx
@@ -0,0 +1,15 @@
+import { Tag } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag>
+      Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
+      ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
+    </Tag>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/icon.tsx b/packages/design/src/tag/demo/icon.tsx
new file mode 100644
index 000000000..5f3ad3f96
--- /dev/null
+++ b/packages/design/src/tag/demo/icon.tsx
@@ -0,0 +1,27 @@
+import {
+  FacebookOutlined,
+  LinkedinOutlined,
+  TwitterOutlined,
+  YoutubeOutlined,
+} from '@oceanbase/icons';
+import { Tag } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag icon={<TwitterOutlined />} color="#55acee">
+      Twitter
+    </Tag>
+    <Tag icon={<YoutubeOutlined />} color="#cd201f">
+      Youtube
+    </Tag>
+    <Tag icon={<FacebookOutlined />} color="#3b5999">
+      Facebook
+    </Tag>
+    <Tag icon={<LinkedinOutlined />} color="#55acee">
+      LinkedIn
+    </Tag>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/select.tsx b/packages/design/src/tag/demo/select.tsx
new file mode 100644
index 000000000..2ebae071e
--- /dev/null
+++ b/packages/design/src/tag/demo/select.tsx
@@ -0,0 +1,40 @@
+import { Select, Tag, Divider } from '@oceanbase/design';
+import React from 'react';
+
+const options = ['gold', 'green', 'red', 'cyan'];
+
+const tagRender = props => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag color={value} onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+      {label}
+    </Tag>
+  );
+};
+
+const App: React.FC = () => (
+  <>
+    <Divider orientation="left">Custom Select</Divider>
+    <Select
+      mode="multiple"
+      tagRender={tagRender}
+      defaultValue={['gold', 'cyan']}
+      style={{ width: '100%' }}
+      options={options.map(item => ({ label: item, value: item }))}
+    />
+    <Divider orientation="left">Input</Divider>
+    <Select
+      mode="tags"
+      showArrow={false}
+      open={false}
+      style={{ width: '100%' }}
+      defaultValue={['input']}
+    />
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/status.tsx b/packages/design/src/tag/demo/status.tsx
new file mode 100644
index 000000000..486584dd3
--- /dev/null
+++ b/packages/design/src/tag/demo/status.tsx
@@ -0,0 +1,46 @@
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  MinusCircleOutlined,
+  SyncOutlined,
+} from '@oceanbase/icons';
+import { Tag, Divider } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Divider orientation="left">Without icon</Divider>
+    <div>
+      <Tag color="success">success</Tag>
+      <Tag color="processing">processing</Tag>
+      <Tag color="error">error</Tag>
+      <Tag color="warning">warning</Tag>
+      <Tag color="default">default</Tag>
+    </div>
+    <Divider orientation="left">With icon</Divider>
+    <div>
+      <Tag icon={<CheckCircleOutlined />} color="success">
+        success
+      </Tag>
+      <Tag icon={<SyncOutlined spin />} color="processing">
+        processing
+      </Tag>
+      <Tag icon={<CloseCircleOutlined />} color="error">
+        error
+      </Tag>
+      <Tag icon={<ExclamationCircleOutlined />} color="warning">
+        warning
+      </Tag>
+      <Tag icon={<ClockCircleOutlined />} color="default">
+        waiting
+      </Tag>
+      <Tag icon={<MinusCircleOutlined />} color="default">
+        stop
+      </Tag>
+    </div>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/index.md b/packages/design/src/tag/index.md
new file mode 100644
index 000000000..5ca14f9a4
--- /dev/null
+++ b/packages/design/src/tag/index.md
@@ -0,0 +1,21 @@
+---
+title: Tag 标签
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全兼容 antd [Tag](https://ant.design/components/tag-cn/) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本"></code> <code src="./demo/ellipsis.tsx" title="内容超长自动省略"></code> <code src="./demo/color.tsx" title="彩色标签" description="我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体色值"></code> <code src="./demo/status.tsx" title="预设状态的标签" description="预设五种状态颜色"></code> <code src="./demo/checkable.tsx" title="可选择标签"></code> <code src="./demo/icon.tsx" title="图标按钮"></code> <code src="./demo/borderless.tsx" title="无边框模式"></code>
+
+## API
+
+| 参数     | 说明                   | 类型    | 默认值 |
+| :------- | :--------------------- | :------ | :----- |
+| ellipsis | 内容超长时是否自动省略 | boolean | true   |
+
+- 详见 antd Tag 文档: https://ant.design/components/tag-cn/
diff --git a/packages/design/src/tag/index.ts b/packages/design/src/tag/index.ts
deleted file mode 100644
index 02028dbff..000000000
--- a/packages/design/src/tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from 'antd/es/tag';
diff --git a/packages/design/src/tag/index.tsx b/packages/design/src/tag/index.tsx
new file mode 100644
index 000000000..5c36f79e0
--- /dev/null
+++ b/packages/design/src/tag/index.tsx
@@ -0,0 +1,60 @@
+import { Tag as AntTag } from 'antd';
+import type { TagProps as AntTagProps } from 'antd/es/tag';
+import { Typography } from '@oceanbase/design';
+import classNames from 'classnames';
+import React, { ReactElement, useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/tag';
+
+export interface TagProps extends AntTagProps {
+  ellipsis?: boolean;
+}
+
+const { CheckableTag } = AntTag;
+
+const Tag = ({
+  prefixCls: customizePrefixCls,
+  className,
+  ellipsis = true,
+  ...restProps
+}: TagProps) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('tag', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
+
+  const tagCls = classNames(
+    {
+      [`${prefixCls}-ellipsis`]: ellipsis,
+    },
+    className
+  );
+  const childrenType = (restProps.children as ReactElement)?.type as any;
+  const { ellipsis: defalutEllipsis, children: defaultChildren } = (restProps.children as ReactElement)?.props || {};
+
+  const ellipsisConfig =
+    typeof defalutEllipsis === 'object'
+      ? defalutEllipsis
+      : {
+        tooltip: childrenType?.__ANT_TOOLTIP ? false : defaultChildren || restProps.children,
+      };
+
+  return ellipsis ? (
+    wrapSSR(
+      <Typography.Text ellipsis={{ ...ellipsisConfig }}>
+        <AntTag prefixCls={customizePrefixCls} className={tagCls} {...restProps} />
+      </Typography.Text>
+    )
+  ) : (
+    <AntTag prefixCls={customizePrefixCls} className={tagCls} {...restProps} />
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Tag.displayName = AntTag.displayName;
+}
+
+Tag.CheckableTag = CheckableTag;
+
+export default Tag;
diff --git a/packages/design/src/tag/style/index.ts b/packages/design/src/tag/style/index.ts
new file mode 100644
index 000000000..a033169f1
--- /dev/null
+++ b/packages/design/src/tag/style/index.ts
@@ -0,0 +1,76 @@
+import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+import { genPresetColor } from 'antd/lib/theme/internal';
+import { TinyColor } from '@ctrl/tinycolor';
+import type { CSSObject } from '@ant-design/cssinjs';
+
+export type TagToken = FullToken<'Tag'>;
+
+const getTagBorderColor = (color: string) => {
+  return new TinyColor(color).setAlpha(0.4).toHex8String();
+};
+
+const genTagPresetStatusStyle = (
+  token: TagToken,
+  status: 'success' | 'processing' | 'error' | 'warning'
+) => {
+  const borderColorMap = {
+    success: token.colorSuccessBorder,
+    processing: token.colorInfoBorder,
+    error: token.colorErrorBorder,
+    warning: token.colorWarningBorder,
+  };
+  return {
+    [`${token.componentCls}${token.componentCls}-${status}`]: {
+      borderColor: getTagBorderColor(borderColorMap[status]),
+    },
+  };
+};
+
+const genPresetStyle = (token: TagToken) =>
+  genPresetColor(token, (colorKey, { textColor, lightBorderColor }) => {
+    return {
+      [`${token.componentCls}${token.componentCls}-${colorKey}`]: {
+        color: textColor,
+        borderColor: getTagBorderColor(lightBorderColor),
+      },
+    };
+  });
+
+export const genTagStyle: GenerateStyle<TagToken> = (token: TagToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      borderColor: getTagBorderColor(token.colorBorder),
+      [`&-ellipsis`]: {
+        maxWidth: '100%',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        verticalAlign: 'bottom',
+      },
+      [`&-checkable`]: {
+        borderColor: 'transparent',
+      },
+      [`&-hidden`]: {
+        display: 'none',
+      },
+      [`&-borderless`]: {
+        border: 'transparent',
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Tag', (token: TagToken) => {
+    return [
+      genTagStyle(token),
+      genPresetStyle(token),
+      genTagPresetStatusStyle(token, 'success'),
+      genTagPresetStatusStyle(token, 'error'),
+      genTagPresetStatusStyle(token, 'processing'),
+      genTagPresetStatusStyle(token, 'warning'),
+    ];
+  });
+  return useStyle(prefixCls);
+};
diff --git a/packages/ui/src/Highlight/demo/theme.tsx b/packages/ui/src/Highlight/demo/theme.tsx
index 5a693a097..3960d1115 100644
--- a/packages/ui/src/Highlight/demo/theme.tsx
+++ b/packages/ui/src/Highlight/demo/theme.tsx
@@ -35,7 +35,7 @@ export default () => {
           })}
         </Select>
         主题选择:
-        <Select<'light' | 'dark'>
+        <Select
           defaultValue={DEFAULT_THEME}
           style={{ width: 120 }}
           onChange={value => setTheme(value)}